Sass（サス）の基礎1 - 気ままに趣味旅行

どうもhiroakiです。

今回はSassについて紹介します。Sass（サス）はCSSを便利で効率的に書くことができる言語です。これを覚えることで、もっと楽にコーディングできます。

Sassを使えばCSSより記述量を減らせ、コードを再利用できます。なので、先ほどもお伝えしたように楽にコーディングできます。

SassにはSASS記法とSCSS記法の2種類の書き方があります。Scss記法が主流なので、こちらを使っていきます。ファイル拡張子は「.scss」です。

Sassのダウンロードは以下のサイトを参考にしてください。※使うにはRubyをダウンロードしておく必要があります。

Pythonで使う方法もあるにはあるみたいなので、分かり次第まとめたいと思います。

Sassでは1つのセレクタの中に別のセレクタを入れ子にして指定できます。同じセレクタを何度も書かなくて良くなりますね。この入れ子構造はより大規模なサイトになるほど効果が大きくなります。クラス名を変えたい場合などで変更箇所を少なく済ませられます。

また、Saasでは「$変数名: 値;」で変数を定義できます。CSSで変数を指定する場合との違いは以下を参考にしてみてください。

また使用したい箇所で変数名を記述することで、変数に格納されていた値が自動的に置き換えられます。プログラミングのコードは上から実行されますので、変数は利用する箇所より前で定義しないと使えません。以下のようにすればhoverなどの疑似クラスも指定しやすいです。

次に「mixin」について説明します。mixinとは、いくつかのコードを1つにまとめて、複数箇所で簡単に呼び出すことができる機能です。

mixinは下のように「@mixin mixin名 { コード }」と定義できます。使用したい場所で「@include mixin名」と指定すると、そこにmixinのcssが代入されます。

また、「@mixin mixin名(引数){ }」として、mixinの引数を指定することで、includeから値を渡すことができます。この引数の場所に外部で指定した変数を置くなどの使い方もできます。

次に、関数についてです。関数を利用すると「特定の色から50%明るい色を使う」といったことなどができます。例えば下は色の関数です。暗くする、明るくする、透明にする関数になります。

color:darken(色,〇%);

color:lighten(色,〇%);

color:rgba(色,〇%);

使用例は以下のようになります。

$blue: #0ac4ff;
.main {
margin: 10px;
    .blue1 {background-color: $blue;}
    .blue2 {background-color:darken($blue,10%);}
}

次は外部ファイルを読み込みます。ファイルを読み込むには「@import "ファイル名"」とします。import時に指定するファイル名は、下記のように「_（アンダーバー）」と拡張子（.scss）を省略できます。ただし読み込み先のファイル名の先頭には必ず「_（アンダーバー）」を付けてください。

今回は以上になります。Sassの便利さがうまく伝わってればいいです。

こちらも参考になりますので、おすすめです。

では。