• ..

npm

    変数

    変数を作る

    Sass の変数は頭に$記号を付けて宣言します。以下は$colorという変数に#cf649aという値を定義する例です。

    $color: #cf649a;

    使う時は、単にその変数名を変わりに使うだけです。

    a {
      color: $color;
    }

    連想配列

    恐らく色情報というのは複数定義する必要がでてくるんじゃないかなと思います。例えば、ベースカラーやアクセントカラー、サブカラーみたいな具合に。
    これは、-colorというような Suffix を色関連の変数には付けるようにしてもいいかもしれませんが、連想配列を使う方法もあります。これは()で囲んで定義します。

    $colors: (
      base: #393939,
      accent: #cf649a,
      sub: #679999,
    );

    これからはmap-getという関数を使って値を取り出すことができます。

    a {
      color: map-get($colors, 'accent');
    }