cssでの色の管理

色の取得をしてくれるもの

webサービス XDプラグイン

基本的な書き方

css

通常

:root {
  --blue: #00f;
}

.className {
  color: var(--blue); /* 青色 */
}

scss

通常

$blue: #00f;

.className {
  color: $blue; // 青色
}

パレットを使ってそこで管理

$palettes: (
  'default': (
    'blue': #00f
  ),
  'footer': (
    'dark': #333
  )
);

@function palette($palette-type, $palette-group: 'default') {
  @return map-get(map-get($palettes, $palette-group), $palette-type);
}

.className {
    color: palette('blue'); // #00fが適応される
}

参考 : https://www.nxworld.net/tips/color-palettes-using-sass-maps.html

stylus

通常

$blue = #00f

.className
  color $blue // 青色

パレットを使ってそこで管理

COLOR_Palette = {
    default: {
        back: #fff,
        text: #323232,
    },
    firstview: {
        back: #e7f3ff
    },
}

MixinColorPalette(type, pattern = default)
    return COLOR_Palette[pattern][type]

.className
    color MixinColorPalette(text) // #323232 が適応される

参考 : https://chaika.hatenablog.com/entry/2016/11/30/114217

所感

長期的に運用していくものだと、コンテンツがどんどん増えていくと思う&色ベースで管理した方が事故が起こりにくいと思うので、

$palettes: (
  'blue': (
    'main': #2681e7,
    'dark': #2c3e51
  ),
  'monotone': (
    'black': #333,
    'white': #fff
  )
);

のような「色ベース」で管理した方が良いと思った。

逆に更新がほとんどされないもの(コーポレートサイトなど)だと コンテンツはそんなに増えていかない(増えたとしてもコンテンツ内で色を追加すればよい)&「〇〇の色は青」みたいな方が伝えやすいと思うので、

$palettes: (
  'default': (
    'text': #333
  ),
  'btn': (
    'main': #2681e7,
    'blue': #0000ff,
  ),
);

のような「コンテンツベース」で管理した方が良いと思った。