Sassで何ができるの？Sassのメリットとは？

SCSS記法

通常のCSSの記述をしながらも、一部入れ子にできたり、新たな機能が使えるようになった記法だ。

ul{
     margin: 50px 0;
      li{
         list-style: none;
     }
}

SASS記法

これが当初に生まれた記法で、普通のCSSから「{}」や「;」などを省略した形で記述されている。しかし、CSSの記述と互換性が無い為、あまり人気が無かった。

投稿一覧ul
     margin: 50px 0
     li
        list-style: none

親子関係のセレクタを入れ子にしてまとめて書ける

通常CSSは、親要素と子要素がある構造の場合、その都度、親要素と子要素の関係を記述する必要がある。

しかし、Sassを利用すると、親要素を記述したら、その中に子要素を入れ子（ネスト）にすることで、まとめて書くことができる。具体的には次のようなコードになる。

通常のCSSコード

この場合ul.navを３回書くことになる

ul.nav{
     margin: 50px 0;
}
ul.nav li{
     list-style: none;
}
ul.nav li span{
     color: red;
}

Sassのコード

Sassの場合はul.navを１度書くだけで済む

ul.nav{
     margin: 50px 0;
     li{
         list-style: none;
         span{
              color: red;
         }
     }
}  

入れ子（ネスト）にできるメリットは、単純にCSSのソースコードが短くなるだけではなく「エリア毎にソースを書く習慣ができるので」ソースが整理され、可読性も良くなるのもメリットの1つだろう。

Sassのネスト機能で使える「&：アンパサンド（アンド）」

上記のネスト機能をさらに便利に使いこなせるようになるアイテムとして、「&：アンパサンド（アンド）」がある。

基本的には「親セレクタを参照」できる機能なのだが、そんな「&：アンパサンド（アンド）」について、詳しく書いたこちらの記事を参考にしてみよう。

▶ Sassの便利な親セレクタの参照「&：アンパサンド（アンド ）」の使い方

Sassでは親セレクタを参照できる＆（アンパサンド）が便利って聞いたけど、使い方が知りたいぞ。オーライ！Sassの＆（…

変数を使って共通の値を使い回せる

例えば、WEBサイト内で「共通の色」を使う場合、通常のCSSではその都度「色指定」をする必要がある。

しかしSassの場合「変数」を使うことで、「共通の値を変数」として指定することができるのだ。

この「変数」の何が良いかと言うと、例えば「変数」を使った共通の色に対して、色を変えてほしいという修正指示があった場合、変数の元の色を１箇所修正するだけで、変数を指定した「全ての箇所を一気に変更」できるというメリットがあるのだ。

変数の基本ルールや使い方はこちらの記事を参考にしよう。

▶ Sassの「変数」の定義と参照の基本ルール。

Sassの変数の使い方を基礎から学びたい！変数はとても便利な機能だ。プログラミングの世界では当たり前に使われる変数だが…

エクステンド（@extend）機能で、１度使ったスタイルを使い回せる

エクステンド機能とは、１度セレクタに対して記述したスタイルを、「別のセレクタにも同じスタイルを」簡単に適用できるというものだ。

使い方としては、まず通常通りセレクタ:スタイル;の形で指定した上で、同じスタイルを付けたい「別のセレクタ」に対して、スタイルの指定の代わりに@extend セレクタ;の形で指定するのだ。

具体的な例としては、次のようなコードになる。

SASSファイル

.box{
    padding:20px;
     border:1px solid #f90;
  }

// .boxのスタイルをエクステンド
.box2{
     margin: 30px 0;
     @extend .box;
}

コンパイル後のCSS

.box, .box2{
    padding:20px;
     border:1px solid #f90;
 }
.box2{
     margin: 30px 0;
}

これで.box2も.boxと同じスタイルがついた上で、marginだけ追加する事ができるのだ。

ミックスイン（@mixin）機能で、コードをモジュール化して再利用できる

「ミックスイン（@mixin）」とは、前述した「エクステンド（@extend）」と似ているが、さらに便利に使うことができる。

ミックスインでは、使い回すスタイルのセットを作成した上で「引数」と言われる変数のようなものを指定する事ができ、実際に使う時には、引き渡す数字を「その時々で、任意の数字に変えて」利用する事ができるのだ。

ミックスイン丁寧に解説した記事があるので、こちらを参考にしてほしい

▶ Sassの「@mixin（ミックスイン）」の使い方と「引数」の解説

Sassの基礎は分かってきたので、そろそろ@mixin（ミックスイン）の使い方を学びたい。Sassの真骨頂ともいえる@…

また、「ミックスイン（@mixin）」と「エクステンド（@extend）」と違いと、その使い分けについて詳しく知りたい方はこちらの記事を是非みておこう！

▶ Sassの「@mixinと@extendの違い」と使い分け

Sassの勉強中だけど、@mixinと@extendの違いがいまいちよくわからない。それぞれの使い所が知りたい。確かに…

複数のSASSファイルを１つのCSSファイルにまとめることができる

sassファイルは、更新性を良くするために、エリアごとにsassファイルを作ったり、機能毎にsassファイルを作って、書き出す時にまとめることが可能。

sassを使うメリットは、便利な機能だけなく、メンテナンス性の向上も大きなメリットでもあるのだ！

if文の条件分岐の処理ができる

Sassでは、もし○○ならば「A」そうでなければ「B」といった具合に、条件をつけてその結果でスタイルを振り分ける使い方も可能だ。

これをプログラミングの世界では「条件分岐」と呼び、この条件分岐はプログラミングでは無くてはならない機能なのだ。

Sassの条件分岐について、その使い方と、どんな時に使うかを確認したい方は、こちらの記事を参考にしておこう！

▶ Sassで「@if文の使い方」と条件分岐は「どういう時に使う」のか？

Sassでは条件分岐が使えると聞いたけど、どうやって使うのか知りたい。あと、条件分岐を「どういう時に使うのか？」も解説し…

@for、@while、@eachなどの反復処理（ループ処理）ができる

Sassでは、if文の他にも「@for、@while、@each」のようなプログラミング言語で良く使う「反復処理（ループ処理）」と言われる繰り返し処理を使う事ができる。

「反復処理」とは、同じような処理を「繰り返し」行う事で、様々な用途や応用方法として使う事ができる。

Sassで使える「@for、@while、@each」の３つのループ処理について詳しく解説した記事はこちら

▶ Sassの@for、@while、@eachの「ループ処理（繰り返し）」の使い方

Sassではループ処理ができるらしいけど、どんなやり方があるか知りたい。Sassには３種類のループ処理がある。これらわ…

関数が使えるようになる

Sassでは便利な関数が用意されている。関数とはあらかじめ作られた「命令文」のようなもので、例えば「小数点以下を四捨五入する『関数 round()』」や、「16進数のカラーコードを10進数のRGB値に変換して、透明度を指定するrgba()」などなど。