環境構築
sudo gem update --system
sudo gem install sass
機能例
ネスト
.body {
> p {
background-color: white;
&:hover{
background-color: red;
}
}
}
- &を書くと、セレクタに置き換わる
- 上記をビルドすると以下のようなcssになる
>|css|
.body > p {
background-color: white;
}
.body > p:hover {
background-color: red;
}
ビルド
- ターミナルで以下を実行すると、before.scssファイルをafter.cssにビルドした上で、ファイルシステムを監視して、before.scssが更新されたら自動的にビルドするように待機する
sass --watch before.scss:after.css
変数
- $に続けて変数名を記載して、:の後ろに値を記述して定義できる
- 利用する場合は#{$変数名}とする
$val : 'red';
.valcss {
color: #{$val};
}
.valcss {
color: red; }
- $配列名: (配列リスト);で定義する
- データは,で区切る
- 最後のデータの後ろには;や,を書かないこと
- 参照は、map_get( 配列名, 項目名)とする
$colors: (
normal: white,
select: red
);
.text_norm {
color: map-get( $colors, normal);
}
.text_select {
color: map-get( $colors, select);
}
.text_norm {
color: white; }
.text_select {
color: red; }
計算
.enzan {
left: (200px-100px)/2;
}
.enzan {
left: 50px; }
ネスト
- {}でネストすることができる
- ネストした中で&を書くと、セレクタに置き換わる
@mixin(引数)
- ブロックを定義することができる
- @includeで置き換えることができる
- @ifで分岐も可能
@extend
- 指定のCSSを貼り付けることができる
- 元となるCSSのセレクタを%で始めると、そのブロックはビルド後に削除される
- extendを使うことで、同じBlockのBlock部分を全ての定義に含めることができ、複数のセレクタを一つにまとめることができる