About

小樽で3年と少し経験を積み、現在は札幌でコーダーをしております。

赤い電動車いすに乗って生活をしています。色々と不便はありますが、行列待ち等の椅子がない状況では、真価を発揮します。

好き:食べる/スロープ/エレベーター
嫌い:食事制限/段差/階段
※スロープやエレベーターに関しては、もはや好きという感情では収まり切れません。

気づけばグルメブログになってしまわぬよう、しっかり更新頑張ります!

Links

【Sass】定義されたカラーに対して調整を行う方法

20%明るく 20%暗く

CSSを書く上でもはや必要不可欠ともなりつつあるSass。実はこのSassを使うことで、定義されたカラーに対して「もう少し明るく」や「もう少し彩度を上げる」という記述が可能になります。ベースカラーがあり、ホバー時にはもう少し明るく!等など、色々な場面で使えそうですね!それでは、見ていきましょう。

コンテンツ一覧

    明るくするlighten / 暗くするdarken

    基本的には、Sassの変数を使いカラーを定義し、それに対して調整するという方法がベターかと思います。コードにすると下記のような感じですね。

    // カラーを変数にセット
    $color: #ea2a2a;
    
    // セットされたカラーに対して10%明るい色で背景色を指定
    .hoge {
      background: lighten($color, 10%);
    }
    
    // セットされたカラーに対して10%暗い色で背景色を指定
    .hogehoge {
      background: darken($color, 10%);
    }
    

    このように記述することで、定義されたカラーに対して自動的に調整されコンパイルされるといった流れになりますね。
    非常に簡単です!

    コンテンツ一覧へ戻る

    彩度を上げるsaturate / 彩度を下げるdesaturate

    先程の明るさと同様に、カラーを変数にセットしてやってみましょう。

    // カラーを変数にセット
    $color: #ea2a2a;
    
    // セットされたカラーに対して10%彩度を上げて背景色を指定
    .hoge {
      background: saturate($color, 10%);
    }
    
    // セットされたカラーに対して10%彩度を下げて背景色を指定
    .hogehoge {
      background: desaturate($color, 10%);
    }
    

    これで、それぞれ彩度が調整された背景色が指定されます。

    コンテンツ一覧へ戻る

    今回も別途サンプルを設けましたので、そちらも併せてご確認ください!

    サンプルを確認する

    ベースカラーに対しての調整のみで全てをカバーするのはもちろん厳しいですが、細々した部分のちょっとした調整には持って来いですね。

    コメントする

    トップへ戻る