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とすることで、取り込むことができます。