SCSS記法について

Question

Scssの記法について。
以下の& + .block-listの部分を効率的に書き換えることは可能でしょうか？

よく、横並びの要素で、2番目以降にmarginを指定したい時に、
.○○○ + .○○○とセレクタ指定するのですが、
以下の書き方だと、ブロック名を変更した際に、書き直す手間が2度手間になってしまうので、
効率的な書き方を探しています。

.block{
	&-list{
		& + .block-list{
		}
}

Comments

[m.ts10806]

SCSS関連のタグを質問に追記してください。CSSをやってる全ての人がSCSSもやってるわけではないです。

Answer 1

.○○○ + .○○○ で ○○○ が同一なのであれば、そのまま parent selector を使うことが出来ます。

Parent Selector

The parent selector, &, is a special selector invented by Sass that’s used in nested selectors to refer to the outer selector. It makes it possible to re-use the outer selector in more complex ways, like adding a pseudo-class or adding a selector before the parent.
When a parent selector is used in an inner selector, it’s replaced with the corresponding outer selector. This happens instead of the normal nesting behavior.

.block {
  display: block;

  &-list {
    padding: 10px;

    & + & {
      margin-left: 10px;
    }
  }
}

.block {
  display: block;
}

.block-list {
  padding: 10px;
}

.block-list + .block-list {
  margin-left: 10px;
}

そうでなければ、適宜参照したいセレクタの存在する箇所にて、そこでの parent selector の値を格納する変数を用意する方法があります。

.block {
  $p: &;
  display: block;
  &-list {
    padding: 10px;
    & + #{$p} {
      margin-left: 10px;
    }
  }
}

.block {
  display: block;
}
.block-list {
  padding: 10px;
}
.block-list + .block {
  margin-left: 10px;
}

Comments

[dongurikunn]

ありがとうございます！！大変助かりました。