[Saas]変数を使って色を指定

#はじめに

詳細ページで同じ下線部を引く所がありました。

Saasの特徴である変数を使って記述していきたいと思います。

#使い方

.hoge {
  background-color: black;
  h1 {
    color: white;
  }
  .hoge-1 {
    color: white;
    h1 {
      background-color: white;
    }
  }
}

例えばこのような形で同じ色を使っていたとします。
そのような場合は事前に変数に代入しておいておけば一括で記述することができます。

$hoge-color: white;

$hoge-colorという変数名にwhiteを代入しました。

この結果以下のように記述することができます。

$hoge-color: white; //カラーを定義

.hoge {
  background-color: black;
  h1 {
    color: $hoge-color;
  }
  .hoge-1 {
    color: $hoge-color;
    h1 {
      background-color: $hoge-color;
    }
  }
}

このように記述する事ができます。

#定義する位置によってできない場合がある

$hoge-color: white; //カラーを定義

.hoge {
  background-color: $hoge-black; //利用する箇所より後ろで定義しているので読み込む事ができません
  h1 {
    color: $hoge-color;
  }
$hoge-black: black;
}

#スコープによってできない場合

$hoge-color: white; //カラーを定義

.hoge {
  $hoge-color: white; //カラーを定義
  background-color: $hoge-color: white; 
 }
h1 {
  color:$hoge-color; //.hoge内で定義されているためh1には適応されない
}