SCSS

ネスト

article.container_01 {
    p {
        color: blue;
    }
}

a {
    @include fos(14); // font-size: 14px;

    &:hover: opacity: 0.4;
    span { display: none; }
}

Mixin & include

mixin

include

変数

変数が数値 …代入して計算が可能（+, -, *, /, …）

$col_01 : blue;
$sample : 14px;
p {
  color : $col_01;
  margin-right : $sample + 2px;
}

↓　コンパイル　↓

p {
  color: blue;
  margin-right: 16px;
}

文字列の結合

文字列 : $sample + “文字列”;
文字列の中で変数 : “#{$sample}文字列”;