【 Education】SCSSの便利機能

SASSとSCSS

styleを指定するcssコード。 気が付くとどんどん長くなり、似たようなstyleが並び、色を変更するのも一苦労。 そんな経験はありませんか？？

SASSはそんなCSSのソースの可読性をかなり向上させ、メンテナンス性を大幅に向上してくれる大人気メタ言語です。

SASSにはSASSとSCSSの２つの記法があるんですが、一般的に使用されているのはSCSSの記法です。これは従来のCSSの記法に沿った記法なので新しく覚えることが少なく導入しやすいからです。

今回はSCSSの便利でよく使用されている機能をいくつかピックアップしご紹介したいと思います。

SCSS構文

入れ子(ネスト)
親セレクタとの関係性がわかりやすく、かつ何度もセレクタを記述しなくても済みます。 font-やborder-など複数記述していたものもまとめて記述できるようになります。 「&」を使えば入れ子になっている親セレクタを引っ張ってくることができます。ほんと便利。

ul {
  margin: 10px;
  li {
    font: {
      family: family;
      size: 1.5em;
      color: blue;
    }
    &:hover {
      color: #FF3399;
    }
  }
}

変数
javascriptで大活躍の変数がスタイルコードでも使えるようになります。 変数にデータを定義しておくとそのスタイル変数をいつでも使えるようになります。 全体の色を変えたいときにいちいち各スタイルを変更しなくても、その変数の値だけを変更すればよくなるので変更対応が爆速になります。凄く便利。

$red: #FF3399;  // この値を変えると$redが指定されている中身も変更される
 
.red {
  color: $red;
}

mixin
プロパティやセレクタをひとまとめにしておく事が可能で、その塊をどこからでもインクルード（読み込み）することができます。 javascriptの関数のイメージです。 引数を設定することで、別の値を導入することもできます。便利。

@mixin box($width:50px, $height:50px) {
  width: $width;
  height: $height;
  background: #eee;
}
 
.box1 {
  @include box(100px, 100px);
  color: #000;
}
 
.box2 {
  @include box();
}

四則演算
めんどくさい計算をわざわざしなくても下記のように式を代入するだけでコンパイル時に計算してくれます。便利。

.box1, .box2, .box3 {
  width: (100%/3);
  height: 960px - 650 - 30;
}

@import
分割した.scssファイルをコンパイル時にひとまとめにするときや、別途.scssファイルと依存させたいときに使用します。 例えばmixinや変数用ファイルを作成し、メインファイルなどでそれらを読み込めば他のファイルで定義した変数などが使えるようになります。便利。

/*_sub.scss*/
p.sub {
  color: red;
}
 
/*main.scss*/
@import "sub";
p.main {
  color: blue;
}

@extend
一度使ったセレクタを継承して使うことが出来ます。 mixinは関数として定義をしておいて別の場所で呼び出しましたが、こちらはすでにstyleとして記述しており、別の場所で「あのセレクタと同じstyleにしたいな」というときに指定します。 指定セレクタに依存しているので呼び出しもとを変更することで一緒に変更更新されます。便利。

.imgR {  
    float: right;  
    margin-left: 10px;  
    margin-bottom: 1.5em;  
}  
 
.photo {  
    @extend .imgR;  
}

制御構文
他にもjavascriptでもおなじみのプログラムもscss内で使用することができます。javascriptに知見がない方はとっつきにくい機能ではありますが、使いこなすととても便利です。

＊@if
@ifの横に記述する条件式がfalseまたはnull以外のものを返す場合、その下にネストされたスタイルを使用します。

$type: top;
 
.main {
  @if $type == top {
    padding: 10px;
  } @else if $type == fotter {
    padding: 5px;
  } @else {
    padding: 15px;
  }
}
 
/*.css*/
.main {
  padding: 10px; }

＊@for
指定した数値の分、一連のスタイルを繰り返し出力します。

.media {
  @for $i from 1 through 3 {
    .item-#{$i} { width: 2em * $i; }
  }
}
 
/*.css*/
.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

＊@each
変数や指定の個数分スタイルを繰り返し出力します。 listやmapによく使用されます。

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
 
/*.css*/
.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

＊@while
条件がfalseになるまで繰り返し入れ子スタイルを出力します。

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}
 
/*.css*/
.item-6 {
  width: 12em; }
.item-4 {
  width: 8em; }
.item-2 {
  width: 4em; }

この他にもSCSSには使いこなすととても便利な機能がたくさん存在します。興味がありましたら是非公式リファレンスを除いてみてください。