SCSSで変数を定義したり、@mixinを使ってみる
変数を定義する
変数を定義するのは簡単です。 [$変数名]を[:]で区切って、値を入れます。
後は、変数名をプロパティに指定すれば、その値が反映されます。
@charset 'utf-8'; $mainColor : #2576E5; header { background-color: $mainColor; } .main { p { color : $mainColor; } }
CSSには以下のように出力されます
header { background-color: #2576E5; } .main p { color: #2576E5; }
mixin
mixinを使えば、定義の塊を作ることができます。
@charset 'utf-8'; @mixin blueText { color:blue; font-size:20px; } @mixin redText { color:red; font-size:30px; } .textBlue { @include blueText; } .textRed { @include redText; } .textRed2 { @include redText; }
@mixinと書いて、そこにそこにCSSのかたまりを定義します。 それを、@includeとすることで、取り込むことができます。