戯言

つらつらと気づいたことを書いていきます。人狼とか。

スポンサーサイト


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSSで変数が使えれば便利なのにと思ったことはありませんか?


CSSで、同じ色やフォントや幅などを何度も書いてしまって、冗長になってることが面倒に感じることってありませんか?
div.header{
	color: blue;
	background-color: white;
}
div.main{
	color: blue;
	background-color: white;
}
div.footer{
	color: blue;
	background-color: white;
}

LESSを使えば、これを、

@main-fg-color:blue;
@main-bg-color:white;
div.header{
	color: @main-fg-color;
	background-color: @main-bg-color;
}
div.main{
	color: @main-fg-color;
	background-color: @main-bg-color;
}
div.footer{
	color: @main-fg-color;
	background-color: @main-bg-color;
}
のように書けます。色や幅、フォントなどの設定を一元化できるので、作成やメンテの効率が上がります。

カラーは、「指定%だけ明るくする」などの設定もできるので、私のような色音痴な人には大変助かります。

また、LESSファイルをブラウザに認識させるためには、専用のjavascriptを読みこませることで可能です。javascriptを利用できない場合は、LESSファイルをCSSファイルに変換して設置します。LESSファイルを修正したら自動的にCSSに変換して、指定フォルダに格納してくれるソフト(Winlessなど)もあるので、これを常駐させておけば、デザイン編集中もLESSを弄っていることを意識することなく、普段と変わらず作業ができます。

LESSの触りだけですが、使いたくなったと思いませんか?



スポンサーサイト
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。