Sassでカラーを変数に設定してCSSのコーディングを速くする方法

Sassでカラーを変数に設定してCSSのコーディングを速くする方法

はやち

はやち

どうもですよ、はやちですよ✌(´ʘ‿ʘ`)✌

このあいだ昼休み中に思い切ってPS4と「龍が如く0」と「Final Fantasy 零式」をポチってしまいました( ˘ω˘)<計65,000円なり
しばらく節約のためお昼のお弁当生活がんばります(◞‸◟)

そんなことはどーでもいいですね。

今回はSassで1つのカラーコードを使い色々と管理をする方法をご紹介します( ˘ω˘)☝

設定方法

まずカラーを変数で定義します。

$base:#46AFED;

 

$baseの色を明るく設定したい場合はlightenで設定します。
%で明るさの値を変えます。

color:lighten($base, 10%);

 

これをまた変数で定義するといいかもですね。

$Lighten10:lighten($base, 10%);

設定方法は以上になります、カンタンですね( ˘ω˘)☝

設定できる種類

設定できる色合いは以下になります( ˘ω˘)☝

lighten 明るく調整をする
darken 暗く調整をする
saturate 彩度を上げる
desaturate 彩度を下げる

ちょいとこれらを設定したものがコチラになります( ˘ω˘)☞三☞シュッシュッ

DEMOを見る

便利サービスのご紹介

1つのカラーから汎用的にカラーを設定することができましたが、%を指定する際、その値のカラーがない場合があります(◞‸◟)
そんなときはこちらのサービスがおすすめです。( ˘ω˘)☝

Sass Color Generator

使い方

使い方はカンタンです( ˘ω˘)
header

  • Step1 カラーコードを入れます。それだけでもうカラーチャートを生成してくれます。
  • Step2 生成する%ごとに表示されます。
  • Step3 前に生成したカラーをまた使うことができます
    ※リロードしたら消えます。

 
生成されたカラーがこのように生成されます( ˘ω˘)☞三☞シュッシュッ

color

ついでにカラーコードも生成されるのでとてもわかりやすいです( ˘ω˘)☝

まとめ

いかがでしたでしょうか?
フォトショでカラーの色味を確認せずともカラーが設定できちゃうのでラクチンですね。
選択範囲を指定して色味を調整するときによしなに明度を調整するのですごく使いやすいなと思いました( ˘ω˘)☝
他にも使えるところはいっぱいあると思うのでガンガン使っていきたいと思います✌(´ʘ‿ʘ`)✌

 

【デザイナーの味方:Sass】

これからSassを始めたい人へ!導入手順をまとめてみた(Dreamweaver対応)

目指せSassマスター!デザイナーがすぐ実践できる基本テクニック12連発

Sassを使ったコーディングの強い味方に!便利なextend&mixin集を作ってみた

Sassを使って時間短縮!アイコンフォントを手軽に使える方法

カスタマイズ性抜群!Sassに対応したCSSフレームワークがアツイ!

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

はやち
はやち フロントエンドエンジニア / 林 佳代子

フロントエンドエンジニアのはやちです( ˘ω˘)☝ 以前までは顔隠しておりましたが思い切ることにしました…。 相変わらず顔文字乱舞ですがブログもコーディングも楽しくやっていこうと思います✌(´ʘ‿ʘ`)✌ 今までに作ったDemoたちはGithubにて公開しております!よろしければ是非( ˘ω˘)☞三☞シュッシュッ

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL