SASSを使用して、より簡易的なコードでクラスによる分岐を実現させたい

Question

前提・実現したいこと

現状のコードだと、同じフォントの指定を何回も指定する形になってしまうため、より短いコードでコンパイルさせるようにしたい。

該当のソースコードは比較的要素が少ないサンプルとして作成していますが、実際のプロジェクトなどでは、この無駄なコードが膨大になってくるため質問させていただきました。

該当のソースコード

$bunki: ('','gray'),('.blue','blue'),('.red','red');
@each $name,$color in $bunki {
  .list_text {
    > li#{$name} {
      > p {
          color: #{$color};
          font-size: 12px;
          line-height: 1.5em;
          font-weight: 700;
        }
    }
  }
}

コンパイル後

.list_text > li > p {
  color: gray;
  font-size: 12px;
  line-height: 1.5em;
  font-weight: 700;
}
.list_text > li.blue > p {
  color: blue;
  font-size: 12px;
  line-height: 1.5em;
  font-weight: 700;
}
.list_text > li.red > p {
  color: red;
  font-size: 12px;
  line-height: 1.5em;
  font-weight: 700;
}

###理想のコンパイル後の形

.list_text > li > p {
  color: gray;
  font-size: 12px;
  line-height: 1.5em;
  font-weight: 700;
}
.list_text > li.blue > p {
  color: blue;
}
.list_text > li.red > p {
  color: red;}

よろしくお願いいたします。

Answer 1

単純に、共通部分だけ別に書けばいいのではないでしょうか？

.list_text > li > p {
  font-size: 12px;
  line-height: 1.5em;
  font-weight: 700;
}
$bunki: ('','gray'),('.blue','blue'),('.red','red');
@each $name,$color in $bunki {
  .list_text {
    > li#{$name} {
      > p {
          color: #{$color};
        }
    }
  }
}

Comments

[maisumakun]

なお、現状で生成されるコードと、「理想のコンパイル後の形」では、一部のプロパティについてCSSの詳細度が違います。

具体的には、詳細度が「.list_text > li.blue > p」＞「div .list_text > li > p」＞「.list_text > li > p」となるので、div .list_text > li > pにスタイルを適用した場合に、元のコードと意味が変わってしまいます。

そのような変更を、特段の指示もせずにコンパイラに行わせるのは適切ではありません。

[hiroakitajima]

ご回答いただきありがとうございます。
追記いただいている詳細度について、大変興味深い内容なのですが、意味が変わってくるという点を読み解くことができませんでした。
この辺りもう少し補足説明お願いできないでしょうか。
何卒よろしくお願いいたします。

[maisumakun]

元のコードでは、「.list_text > li.blue > p」に「font-size: 12px;」などがかかっていますが、これは「クラスセレクタ2つ、要素セレクタ2つ」です。一方で、まとめてしまった「.list_text > li > p」では「クラスセレクタ1つ、要素セレクタ2つ」となっています。

CSSの詳細度は「クラスセレクタの個数が多い方、それが同じなら要素セレクタの多い方」で決まりますので、「div .list_text > li > p」という「クラスセレクタ1つ、要素セレクタ3つ」のセレクタを持ってきた場合、「.list_text > li > p」には勝ちますが「.list_text > li.blue > p」には負ける、ということになります。