トップページ > コンテンツ > コンピュータ関連その他 > CSS編 > CSSツール集 > Sass

Sass記法とSCSS記法があるが、ここではSCSS記法について触れる。

他ファイルから参照

@import 'scssファイル名'

ネストで表現する

/*xxx.scss*/
a {
   記述A
   &:hover {
       記述B
   }
}

はCSSに変換すると、

a{
  記述A
}
a:hover {
  記述B
}

の意味

変数

$変数名:値;の形式で宣言。
使うときは以下のように$変数名を入れれば良い。
background-color: $変数名;

条件式

a {
  @if 条件式1 {
    記述1
  }
  @elif 条件式2 {
    記述2
  }
  @else {
   記述3
  }
}

関数

@mixin 関数($引数) {
  記述
}
の形で定義し、
要素等 {
  @include 関数名(値);
}
の形で呼び出す。

継承

要素1 {
  記述A
}
要素2 {
  @extend 要素1
  記述B
}
とすると、要素2は要素1の記述+記述Bのような形となる。

参考：
http://dotinstall.com/lessons/basic_sass