こんにちは。Webクリエイターのマツコです。 近年、フロントエンドのコーディング周りで、CSSメタ言語（CSSプリプロセッサ）を利用するケースが増えています。 今まであまり触る機会がなかったのですが、私も流れに乗って新しめのCSSメタ言語「Stylus」についての概要と主要機能をまとめてみました。 少し長いですが、おつきあい下さい！ 目次 1.そもそもCSSメタ言語って？ 2.Stylusとは 3.Stylusの書き方 4.Stylusでできること ネスト（入れ子） 親要素参照 変数 継承（extend） ミックスイン パーシャル 演算 条件分岐と繰り返し 5.まとめ そもそもCSSメタ言語って？ CSSメタ言語は、CSSの生産性向上の為に拡張された技術です。 普通のCSSと異なり、セレクタを入れ子にする、四則演算、変数、関数、ifやeachなどの条件分岐ができることが特徴です。CSSに慣
.hoge color red &:hover color blue ``` CSS っぽい書き方とインデントの書き方ができるが、拡張子は `.styl` のみで、記法を混在させることもできる。 ## 変数と演算 変数に値を代入しておくことで、変数名で任意の場所から値を参照することができる。 ```sass base-color = #00a6fc .title color base-color ``` `@` をつけると、直前のそのプロパティを参照することもできる。かっこ必要。 演算もできる。 ```sass .container width 100% .sidebar width (@width * 0.3) ``` ## 条件分岐と繰り返し ### if / else 文 ```sass liquid = true .hoge if liquid width 100% else wi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く