Sassでカラーを変数に設定してCSSのコーディングを速くする方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもですよ、はやちですよ✌(´ʘ‿ʘ｀)✌ このあいだ昼休み中に思い切ってPS4と「龍が如く0」と「Final Fantasy 零式」をポチってしまいました( ˘ω˘)＜計65,000円なり しばらく節約のためお昼のお弁当生活がんばります(◞‸◟) そんなことはどーでもいいですね。 今回はSassで1つのカラーコードを使い色々と管理をする方法をご紹介します( ˘ω˘)☝ 設定方法 まずカラーを変数で定義します。 $base:#46AFED; $baseの色を明るく設定したい場合はlightenで設定します。 %で明るさの値を変えます。 color:lighten($base, 10%); これをまた変数で定義するといいかもですね。 $Lighten10:lighten($base, 10%); 設定方法は以上になります、カンタンですね( ˘ω˘)☝ 設定できる種類 設定できる色合いは以下
Sassでの色管理
Sassでは色を変数として定義でき、また様々な関数でそれを操作することが可能になっている。そのため色を論理的に管理することが可能になっているが、これといった手法が確立されているわけではない。このウェブサイトでは少しややこしい形で管理するようにしている。どういう目的でこういう複雑な構造になっているのかを簡単に書いておきたい。 基本色の定義 基本色、つまりテーマカラーであったり、本文の背景色や文字色といった見た目のイメージを決定する色は、色コードを直接指定して定義する必要がある。これはほぼ間違いなくみんな同じように書いているだろう。 $color-dark: rgb(60, 51, 48); $color-light: rgb(252, 249, 240); $color-accent: rgb(17, 136, 187); これらは背景色であったり文字色、そしてリンクの文字色として使っている
SASS/SCSSで基本カラーを設定して効率よくカラーバリエーションを作成する
共通のSCSSファイルを作成する カラー設定は他のSCSSファイルから共通して使用すると効率が良いです。 なのでカラー設定用のSCSSファイルを最初に作成します。 共通の変数は「_variables.scss」というファイル名にします。 「_」で始まるファイルはコンパイルされません。 _variables.scss $base-color: #536A97; とりあえず「$baseColor」という変数を一つ作成しました。 変数を使用する さきほどカラー設定した変数を使用してみましょう。 base.scss @import "_variables.scss"; h1 { color: $base-color; } 適当なファイル（base.scss）を作成したら、カラー設定した「_variables.scss」をインポートします。 あとは使いたい場所に「$baseColor」を記述するだけ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sass Color Generator
