CSSで子要素をまとめて指定したい

Question

cssで以下のようにある親の子要素を大量に定義しているのですが、予め.a {}で全て囲むような
簡単な書き方はありませんか？
調べても見つけられませんでした。

.a .b {
}
.a .c {
}
.a .d {
}
.a .e {
}

Comments

[kokemomo.sour]

ご存知でしたらすいません。。
環境を整えることが可能であれば、
sassやscssなどのaltCSSはいかがでしょう。

[nicoyou]

ご回答ありがとうございます
名前だけしか知らなかったので調べてきました
要素をネストすることが出来るのですね、scssでネスト出来ることが新機能のように紹介されていたので、普通のcssでは不可能そうですね...
オンラインでもcssに変換できるようなのでscssを使用する方向で考えようと思います
差支えなければ修正依頼ではなくて解答として再度入力していただけませんか？

[kokemomo.sour]

お役に立てたのであればよかったです。
回答に転記いたしました。

Answer 1

たとえばlessとか

Comments

[yambejp]

//my.css
.x{
.a{color:red}
.b{color:blue}
.c{color:green}
}
.y .a{color:red}
.y .b{color:blue}
.y .c{color:green}
}

[yambejp]

//呼び出し
<link rel="stylesheet/less" type="text/css" href="my.css">
<script src="ttps://cdn.polyfill.io/v2/polyfill.min.js"></script><!--IEいらないならpoliyfill不要-->
<script src="ttps://cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script>

<div class="x">
<div class="a">a1</div>
<div class="b">b1</div>
<div class="c">c1</div>
</div>
<div class="y">
<div class="a">a2</div>
<div class="b">b2</div>
<div class="c">c2</div>
</div>

[nicoyou]

ご回答ありがとうございます
このようなやり方もあるのですね
ただ、余り外部の(他の)ライブラリは読み込みたくないです
lessの存在は覚えておきますm(__)m

[yambejp]

> 外部の(他の)ライブラリは読み込みたくない

標準のCSSにはスコープを多段にする機能はないので
多かれ少なかれなにか別のライブラリが必要です

[nicoyou]

一応、scss形式で書いた物をcssに変換してアップロードする方法で解決とさせていただきました

[yambejp]

> scss形式で書いた物をcssに変換して

ああ、そっちの一手間は問題ないのですね
それならscssの方がユーザーには親切かもしれませんね

Answer 2

環境を整えることが可能であれば、
sassやscssなどのaltCSSはいかがでしょう。