[CSS]変数などを使用してスタイルシートの記述ルールを拡張できる -LESS

スタイルシートに変数を用いたり、新たなプロパティを設定し、スタイルシートの記述ルールを拡張できる「LESS」を紹介します。

LESS -Leaner CSS

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

また、新たなプロパティの設定、ネストの簡略化などもできます。

新たなプロパティの設定

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

ネストの簡略化

#header {
  color: red;
  a {
    font-weight: bold;
    text-decoration: none;
  }
}

LESSを使用するには、rubyをインストールする必要があります。

Post on:2009年6月17日