[CSS]変数などを使用してスタイルシートの記述ルールを拡張できる -LESS
Post on:2009年6月17日
スタイルシートに変数を用いたり、新たなプロパティを設定し、スタイルシートの記述ルールを拡張できる「LESS」を紹介します。

変数は、数値を足したり引いたりすることもできます。

また、新たなプロパティの設定、ネストの簡略化などもできます。
新たなプロパティの設定
1 2 3 4 5 6 7 8 9 10 11 |
<textarea name="code" class="css" cols="60" rows="5"> .rounded_corners { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } #header { .rounded_corners; } </textarea> |
ネストの簡略化
1 2 3 4 5 6 7 8 9 |
<textarea name="code" class="css" cols="60" rows="5"> #header { color: red; a { font-weight: bold; text-decoration: none; } } </textarea> |
LESSを使用するには、rubyをインストールする必要があります。
sponsors