2024.08.02

Sass

ローカル変数をスタイルセットの外側で使用

通常Sassのローカル変数はスタイルセットの外側で使用することができません。セレクタ名の一部で変数を使用する場合、以下のように記述すると定義されていない変数を参照することになり、コンパイルエラーが発生します。

.products {
  &-item {
    $this: &;
  }

  &-photo {
    margin-top: 20px;

    #{$this}:first-child & {
      margin-top: 0;
    }
  }
}

そこで以下の記述に変更します。変数$thisを参照できる位置に記述し、スタイルセット内で上書きします。

.products {
  $this: &;

  &-item {
    $this: &;
  }

  &-photo {
    margin-top: 20px;

    #{$this}:first-child & {
      margin-top: 0;
    }
  }
}

これで以下の通り、正常にコンパイルができます。変数$thisの中身は「.products」ではなく「.products-item」になっているのがポイントです。

.products-photo {
  margin-top: 20px;
}

.products-item:first-child .products-photo {
  margin-top: 0;
}

関連記事

2024.06.27

Sass

@contentを利用してmixinにスタイルセットを渡す

mixinの中で@contentを記述すると、呼び出し側から渡されたCSSの記述(スタイルセット)を@contentが書かれた場所で展開します。 以下はhove…

2021.07.24

Sass

16進数のRGB値に透明度を指定

CSSでは16進数のRGB値に透明度を指定することはできません。例えば以下のような指定はエラーになり、背景色が適用されません。 Sassではrgba();という…

2021.02.19

Sass

mixinでfont-sizeとletter-spacingを設定

htmlタグやbodyタグにfont-sizeの基準値を何も設定していない場合、1emを指定すると16pxで表示されます。20pxで表示したい場合は、20px …

2022.07.13

Sass

@extendのプレースホルダーセレクタを利用

@extend専用のプレースホルダーセレクタは「%セレクタ名」のように記述します。@extendのプレースホルダーセレクタはCSSとして生成されません。 以下の…

2020.09.30

Sass

Koalaで発生したコンパイルエラーの対処法

Koalaで発生したコンパイルエラーの対処法です。発生したエラーはログから確認できますが、Koalaの起動を終了するとエラーログは消去されます。 Argumen…

上に戻る