【Sass】Sassの書き方・基本のホ

なにこれ？

自称超絶かっこいいCSSことSass様についてのメモ。
前回の続き。

コード

変数

/*白の設定*/
$white01: #ffffff;
$white02: #fffff0;

/*余白の設定*/
$common-margin01: 80px;
$common-margin02: 100px;

簡単だし便利。

ルールセット内のみの変数を作って使う

.container01{
 $value01: 50px;
 $value02: 80px;
 margin-top: $value01;
 margin-bottom: $value02;
 &--txt{
  padding: $value02 $value01;
 }
}

.container02{
 $value01: 5px;
 $value02: 10px;
 margin-top: $value01;
 margin-bottom: $value02;
 &--txt{
  padding: $value02 $value01;
 }
}

{}の中でしか使えないから、.container01と.container02両方で同じ$value01,02という名前を使う事も可能。
あんまり使ってないから今度使ってみようかな。
ルールセットの中で宣言した変数名と、ルールセットの外で宣言した変数名が同じ名前だった場合は、
ルールセットの中で宣言した方が優先される。