SCSS 変数、@extend

こまごま、SCSSの基本機能について整理しておく。

変数

SCSSではプログラミング言語のように変数を使用することができる。CSSのカスタムプロパティとは全く別の機能。

// $をつけた変数名を定義し、値を代入する
// 波括弧の外に記述すると、グローバルな変数として扱われる

$mainColor: red;
$mainFontSize: 16px;

h1 {
  color: $mainColor;
  font-size: $mainFontSize;
}

コンパイルするとこうなる。

h1 {
  color: red;
  font-size: 16px;
}

カスタムプロパティとの違いは https://www.webcreatorbox.com/tech/css-variables が詳しい。

プロパティの値以外にも、特定の文字列や真偽値、リストや辞書などけっこう色んなものを定義することができる。

注意点としては、アンダースコアとハイフンが同じ文字として評価されてしまうことなどがある。基本的にはアンダースコアで統一したほうが良さそう。

入れ子の記法

<div class="contentWrap">
    <h1 class="contentWrap__leadText">Hello!</h1>
    <p class="contentWrap__paragraph">Helloとは英語で挨拶を意味する</p>
</div>

こんなHTMLに対して、SCSSを入れ子で設定する。

.contentWrap {
    width: 100%;
    .contentWrap__leadText {
        font-size: 3rem;
        color: red;
    }
    .contentWrap__paragraph {
        font-size: 1rem;
        &:hover {
            font-color: Blue;
        }
    }
}

これをコンパイルすると

.contentWrap {
  width: 100%;
}

.contentWrap .contentWrap__leadText {
  font-size: 3rem;
  color: red;
}

.contentWrap .contentWrap__paragraph {
  font-size: 1rem;
}

.contentWrap .contentWrap__paragraph:hover {
  font-color: Blue;
}

親子関係を自動で記述して出力してくれる。BEMで記述しているときの強い味方

疑似要素などを適用させたい場合は、対象とするプロパティをネストし、「&」で参照することができる

@extend

@extendを使うと、記述済みのCSSを参照することができる。

.btn {
    width: 100px;
    height: 50px;
}
.btn--blue {
    @extend .btn;
    background-color: blue;
}
.btn--red {
    @extend .btn;
    background-color: red;
}

コンパイルすると

.btn, .btn--blue, .btn--red {
  width: 100px;
  height: 50px;
}

.btn--blue {
  background-color: blue;
}

.btn--red {
  background-color: red;
}

共通のスタイルはまとめられ、固有のスタイルはそれぞれ個別に記述される。

このケースだと.btnが共通スタイルを記述するためだけに存在する、という場合がある。そうした場合にコンパイル後に出力される必要がない。

その場合はクラスの代わりに%を使用することで、出力対象から除外することができる。

%btn {
    width: 100px;
    height: 50px;
}
.btn--blue {
    @extend %btn;
    background-color: blue;
}
.btn--red {
    @extend %btn;
    background-color: red;
}

コンパイル

.btn--blue, .btn--red {
  width: 100px;
  height: 50px;
}

.btn--blue {
  background-color: blue;
}

.btn--red {
  background-color: red;
}

ふむふむ

参考文献

カテゴリー: SCSS
このサイトの主
投稿を作成しました 98

関連投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る