こんにちは。Webクリエイターのマツコです。 近年、フロントエンドのコーディング周りで、CSSメタ言語(CSSプリプロセッサ)を利用するケースが増えています。 今まであまり触る機会がなかったのですが、私も流れに乗って新しめのCSSメタ言語「Stylus」についての概要と主要機能をまとめてみました。 少し長いですが、おつきあい下さい! 目次 1.そもそもCSSメタ言語って? 2.Stylusとは 3.Stylusの書き方 4.Stylusでできること ネスト(入れ子) 親要素参照 変数 継承(extend) ミックスイン パーシャル 演算 条件分岐と繰り返し 5.まとめ そもそもCSSメタ言語って? CSSメタ言語は、CSSの生産性向上の為に拡張された技術です。 普通のCSSと異なり、セレクタを入れ子にする、四則演算、変数、関数、ifやeachなどの条件分岐ができることが特徴です。CSSに慣