HTML・CSS 2018.04.10

こんにちは!セブ島生活も早いもので残すところあと3週間を切ったHIDEです(^^ゞ

これまでIT講義の中で、いくつかのプログラミング言語を学びました。
まずはWEBサイトの土台を構築する”HTML”
そのHTMLで作ったものに色を付けたり、余白を決めたりとスタイルを指定できるのが”CSS”
サーバーサイドでサイトを動的に動かす”PHP”

ここですでに私の脳内のキャパは要領オーバーで
少し溢れだしているほどでしたが(笑)
ここでもう一つ
「今後ITを学ぶ上でも必ず重宝するから”Sass”だけは習得しておけ!!!」
という非常にありがたい命令が下されたのでついに最後の力をふり絞って”Sass”に挑戦することを決意しました。

※実際、講義をしてくださっている先生は非常に優しいのでこんな言い方はしていません(笑)

SASSとは

Sass=Syntactically Awesome Stylesheets
直訳すると、「構文的に すげぇやべぇ スタイルシート」
とにかくすごいものだからとりあえず習得しときなよ ということですね。(勝手な自己解釈です笑)

これがなんなのかと言うと、簡単に言えばCSSの進化系のようなイメージです。
比較的長くなりやすく、記述が面倒なCSSをより短く記述できるので効率化が図れます。
そのほかにもSassを使ってできることはいくつかあるので紹介していきます。

SCSSとは

SCSS=Sassy CSS
直訳すると、「生意気な CSS」
??まぁCSSもちょっと生意気なくらいに省略して書いちゃえよ! といった感じですかね。これも勝手な解釈です(笑)

SASSとSCSSの違い

これらは共にメタ言語(CSSを拡張したプログラミング言語)と呼ばれます。
まず違いとして拡張子が異なります。
それぞれ.sass/.scssとなります。

書き方の違い

~CSS~

~SASS~

~SCSS~

メリット/デメリット

SASSを使った場合、インデントだけで書くことができるため、記述する量が圧倒的に少なくて済みます。
ただし、見慣れるまでは分かりづらかったり、ルールも細かいようです。

SCSSを使った場合、{}を使った記述になるのでCSSと似ていてわかりやすいという意見が多いですが、
ネスト構造で{}も多様するため記述が圧倒的に長くなってしまうというデメリットもあります。

どちらが良い悪いということはありませんが
最近ではSCSSを使うのが主流のようで、調べものをしてもSASSの情報よりもSCSSの情報の方が多く出回っていることも確かではあります。

というわけで今回はSCSSを使って説明していこうと思います。

SCSSを使ってできること

ネスト構造(入れ子)

CSSを記述していると、どうしても長くなってしまう事って多々あると思います。

~CSS~

~SCSS~

親参照セレクタ”&”(アンパサンド)

この”&”を使えば親のセレクタを記述しなくても自動で与えてくれるので
かなり記述が楽になります。
特に疑似クラス・疑似要素を使用する際には重宝します。

例)※上記のリンクタグに対してhoverの疑似クラスを指定するとします。

~CSS~

~SCSS~

四則演算

Sassでは(+-*/)の4つの演算子を使って計算までできます。

例)

~CSS~

~SCSS~

変数定義

プログラミング言語同様に変数を定義することができます。
何度も繰り返し使用する文字カラーやレスポンシブのブレイクポイントなど
変数として定義指定してしまえば、使いまわしが可能です。

例)

~HTML~

~CSS~

~SCSS~

SCSSの使い方

SASSやSCSSを使う際、CSSファイルにいきなり直接SASSやSCSSの記述をすることはできません。
そのためにやらなくてはいけないことがいくつかあります。

 

コンパイル

テキストエディタでsublimeを使用している場合、プラグインをインストールしてから、簡単にコンパイルを行うことができます。(「SCSS」と「Compass」というプラグインをまず導入します。)

ショートカットキー(Ctrl+B)でコンパイルができます。

 

SASS(SCSS)を利用することで作業効率が高まり記述が楽になるという事がわかっていただけたでしょうか?

新たな言語や記述を覚えるのは少し気が引けたり億劫になる気持ちはよ~~くわかります。
ただ、このSASS(SCSS)はCSSの知識があれば比較的簡単に習得できるので是非皆さんも挑戦してみてください。

IT留学に関するお問い合わせ
IT勉強中の方必見!重宝すること間違いなしの”SASS”を習得しよう

この記事が気に入ったら
いいね!をお願いします(^^)