前回はHTMLの記述量を減らす「テンプレートエンジン」を体験しました。今回はCSSの記述量を減らす「AltCSS」を体験していきたいと思います。アルトいいねのAltCSS!え?オルトと読むって?まぁそういう人もオルト。目次:LESSLESSの主な記法SCSSSCSSの主な記法SassSassの主な記法StylusStylusの主な記法LESS、SCSSのような書き方Sassのような書き方さらに省略した書き方PostCSSプラグインnestedcssnextまとめ※参考:CSSの基本についてはこちら【CSSの基本】書ける前に読む!HTML、CSS、JSの書式-3※2019/10/20:この記事上にソースコードがありませんでしたが、追記しました。LESSまたまたCodePenのSettingを上から順番にいく。見た感じは通常のCSSに似ていて、そこに便利な書き方が加わっている感じ。LESSの主な記法ネスト(階層化)LESSはdivのネストの階層化ができる。「&」の後に擬似クラスを繋げると親セレクタを参照する。下記の「.bikou」の中の「&:before」は「.bikou:before」を意味する。class="lede">CodepenのSettingの旅も遂にCSS編に突入。<br>それにしても、Codepen、予測変換機能があるといいなぁ<br>あ、でもあれか。予測変換がない方が学習経験的にはいいのか。<p>LESSはdivのネストの階層化ができる。この段落は<em>ネスト</em>でスタイルを当てている。CSSの記述量も減っているし、HTML内にBEMのような長いclassをつけなくてもいい。class="bikou">親セレクタの参照、LESSでもできてる?もう少し比較が必要か。}}これはHTMLとほぼ同じ構造になっていて見やすいのではないだろうか!CSSの記述量も減っているし、HTML内にBEMのような長いclassをつけなくてもいい。裸のCSSもそのまま活きるので部分的な書き換えも可能。LESSのコンパイルはNodeでできるらしい。(Rubyでもできる?)また、コンパイルしなくても「less.js」というJSファイルをリンクすることで読み込めるようだ。SCSS2番目はSCSS。基本的な書き方はLESSとほとんど同じなようだ。SCSSの主な記法ネストSCSSもdivのネストの階層化ができる。class="lede">CodepenのSettingの旅CSS編第2回。<p>SCSSもdivのネストの階層化ができる。この段落は<em>ネスト</em>でスタイルを当てている。ん?この書き方はLESSとほぼまったく同じだ。<p>おそらくLESSにはないSCSS専用の機能。class="bikou">この尾行欄につけている「※」印は「.bikou:before」ではなく「&:before」だけで済んでいる。}}こちらはRubyでコンパイルする。Sass3番目はSass。