こちらはCSSとは違う独自の書き方。波括弧{}は不要ネスト(階層化)Sassのネストは、インデントを入れなければならないが、直接のネストでなければ、同じ階層じゃないタグでも同じインデント数で行けるようだ。pにインデントを一つ入れていて、その下のリストliはpから見たらulが並列で、liは一つ下だが、pとliは同じインデント数でもスタイルは適用された。親セレクタの参照(&)はインデントをもう一段階下げる必要があった。class="lede">CodepenのSettingの旅CSS編第3回。class="bikou">文字数は少ないがLESSやSCSSよりも厳密な感じがする。id="nest"><h2>ネスト(階層化)</h2><p>Sassのネストは、インデントを入れなければならないが、直接のネストでなければ、同じ階層じゃないタグでも同じインデント数で行けるようだ。pにインデントを一つ入れていて、その下のリストliはpから見たらulが並列で、liは一つ下だが、pとliは同じインデント数でもスタイルは適用された。class="bikou">親セレクタの参照(&)はインデントをもう一段階下げる必要があった。'※'文字数は少ない代わりにLESSやSCSSよりもインデントが厳密な感じがする。コンパイルはSCSSと同様Ruby。この記法も「Rubyライク」とのことなので元々Rubyを書いててフロントに移行する人には親和性が高いのかもしれない。こちらは裸のCSSはそのままでは活きないため、全て書き換える必要がある。Stylus4番目はStylus。LESSとSASSのいいとこ取りと言われるそうな。Stylusの主な記法Stylusはフレキシブルで色々な書き方ができる。LESS、SCSSのような書き方Sassのような書き方さらに省略した書き方そして、これらが混在しててもOK!!LESS、SCSSのような書き方LESSはCSSと記法が近く、初めてメタ言語に手を出す人にとっては読みやすく手を出しやすい。RubyライクでスタイリッシュだったSASSもLESSの影響でCSSに近いSCSS記法を後から作った。Stylusも同様の書き方ができる。「#less」の段落はその書き方で書いています。波括弧{}や行末セミコロン;を省略するなど、スタイリッシュな記法。その代わりにインデントは厳密に入れなければならない。覚えるのに少し学習がいるが、ネクスが深い時に波括弧の数を気にしなくていいので、慣れればいいかもしれない。Stylusも同様の書き方ができる。「#sass」の段落はその書き方で書いています。省略した書き方そしてこれは、Stylusのオリジナルな記法だが、プロパティのコロン:も省略ができる。「#kihou」の段落でいくつか省略をテストして見た。全部効いた!フレキシブル!※親要素の参照は「&」。これはLESSもSassも一緒。class="lede">CodepenのSettingの旅CSS編第4回。LESSとSASSのいいとこ取りと言われるそうな。<p>Stylusはフレキシブルで色々な書き方ができる。id="less"><h2>LESS、SCSSのような書き方</h2><p>LESSはCSSと記法が近く、初めてメタ言語に手を出す人にとっては読みやすく手を出しやすい。<br>Rubyと似た書き方でスタイリッシュだったSASSもLESSの影響で、CSSに近いSCSS記法を後から作った。<br>Stylusも同様の書き方ができる。class="bikou">この段落はその書き方で書いています。id="sass"><h2>Sassのような書き方</h2><p>波括弧{}や行末セミコロン;を省略するなど、スタイリッシュな記法。その代わりにインデントは厳密に入れなければならない。<br>SassはRubyで動き、記法もRubyと似ているらしい。覚えるのに少し学習がいるが、ネクスが深い時に波括弧の数を気にしなくていいので、慣れればいいかもしれない。<br>そしてStylusも同様の書き方ができる。class="bikou">この段落はその書き方で書いています。id="stylus"><h2>さらに省略した書き方</h2><p>そしてこれは、Stylusのオリジナルな記法だが、プロパティのコロン:も省略ができる。class="bikou">この段落はその書き方で書いています。class="bikou">親要素の参照は「&」。これはLESSもSassも一緒。red;StylusのコンパイルもNode.jsで行う。裸のCSSや他の記法も活きるため、既存サイトの修正にフレキシブルに対応できそう。PostCSSPostCSSは新し目のメタ言語で、LESSやSASSと同じようなことができるがコンセプトは少し違うようだ。プラグイン必要な機能をプラグインで加えていく。プラグインは個人が自由に作ることができるため、様々な種類が公開されている。cssnextなどのプラグインは将来W3Cが採択する予定の記法を先取りして使用できる。hogehoge;」という感じで入れるようだ。nestedSASSやLESSのようにネストでかけるプラグイン。cssnextW3Cが将来採用する予定の書き方ができる。変数は「:root」で設定して「var(--hoge);」に適用される。他の記法で変数についてまだ触れなかったがLESSは「@」、SASSは「$」で記号が異なる。CSSの変数は将来的には「--」が採用されそうなので、PostCSSで慣れておくといいかもしれない。class="lede">CodepenのSettingの旅CSS編の最終回。PostCSSは新し目のメタ言語で、LESSやSASSと同じようなことができるがコンセプトは少し違うようだ。<li>プラグインは個人が自由に作ることができるため、様々な種類が公開されている。<li>cssnextなどのプラグインは将来W3Cが採択する予定の記法を先取りして使用できる。hogehoge;」という感じで入れるようだ。<p>SASSやLESSのようにネストでかけるプラグイン。<p>W3Cが将来採用する予定の書き方ができる。変数は「:root」で設定して「var(--hoge);」に適用される。LESSは@、SASSは$だが将来的には--になりそう。}}なお、PostCSSのコンパイルもNodeのようです。コンパイルが早い!のが定評らしい。まとめ実際に触ってみて下記のような印象を持ちました。CSSと似た書き方でより便利に書きたい→LESS、SCSS。コンパイルをNodeで行いたい→LESS。いや、Rubyで行いたい→SCSS。コンパイルはRuby。書き方も全てRubyライクでスタイリッシュに行きたい!→Sassいろんな書き方をフレキシブルに混在させたい。→Stylusまたは他の人が作ったCSSを修正することになった。→Stylus次世代CSSがどのような書き方になるか体験したい。→PostCSSみんなが作った豊富なプラグインを体験したい(jQueryやWordPress的なシェア文化)→PostCSS今回、変数、関数による値の代入は深くやらなかったが、例えば分散して書かれた同じ色やサイズを全部を修正しなきゃ、みたいな経験は皆さんあると思います。変数、関数はそういう時に強力な機能と思います。他にも演算など便利な機能がまだまだあるようです。個人的にはBEMなどclass名が長くなるCSS設計をするよりもAltCSSで設計する方がいいのかもしれない、と感じました。次回は「AltJS」を体験しましょう〜。06:59Tweet関連記事2019-12-25【JS】TypeScriptをGulpでコンパイルしてみるGulpの続きです。前回はAltCSSのSass(SCSS)をコンパイルしまし...2019-12-17【CSS】Sass(SCSS)をGulpでコンパイルしてみるGulpの続きです。メタ言語(HTMLテ...2019-10-02【HTML】PugでFizzBuzzる!(テンプレートエンジンの変数、for文、if文)以前の記事で紹介したテンプレートエンジンPug。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。