はい、というわけで、前回はSASSを使ってみたわけですが～とラジオDJ風に書き出してみたりして。 SASSの続きです。 SASSには、CSSにはない独自の便利機能も持っているそうです。
(1)変数が使える
「$」記号を使って変数を宣言して、それをスタイルの中で使えるそうです。 このように使う
$haba: 600px;
#main { width: $haba; }
(2)計算も使える
$haba: 600px;
#side {
width: $haba / 2;
height: 150px * 3;
margin: 100% -50;
}
コンパイルするとこうなる。
#side {
width: 300px;
height: 450px;
margin: 50%; }
(3)関数を定義して使うことができる
例@function nibai($value) {
@return ($value * 2);
}
.main{
width: nibai(300px);
}
コンパイルすると
.main {
width: 600px; }
条件分岐「if」
こんな感じで使います
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
コンパイルすると（変数$typeの値がmonsterと最初に宣言されているので
p { color: green; }
繰り返し「for」
例@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
出力は
.item-1 {
width: 2em; }
.item-2 {
width: 4em; }
.item-3 {
width: 6em; }
(4)外部のSassファイルをインポートできる
@import "header.scss";
@import "footer.scss";
バラバラに作っておいて、後で合体させることができるわけですね。
(5)他のスタイルを継承させる事ができる
.wakusen{
padding: 10px;
border: 1px solid gray;
background-color: lightcyan;
}
.bottun{
@extend .wakusen; //.wakusenのスタイルを継承
background-color: lightblue; //スタイルの上書き
font-size: 1.5em; //スタイルの追加
}
コンパイル後
.wakusen, .bottun {
padding: 10px;
border: 1px solid gray;
background-color: lightcyan; }
.bottun {
background-color: lightblue;
font-size: 1.5em; }
(6)その他
「 @mixin 」(引数の指定) 「 @content 」(@mixinの中で使用、コンテントブロックを渡す) 「 @at-root 」(ネストを解除)
前回の記事で「既存のCSSはSASSに変換できない」と書きましたが、それをやってくれるサイト（サービス）を発見！ http://css2sass.herokuapp.com/ これは便利・・・ こういうのがあると、SASSはますます普及していくかも知れませんね。 そのうち、コンパイルしなくてもSCSSを直接ブラウザが読めるようになっていくのかも？
コメント