最近LESSでCSSを書くことが増えてきました。 LESSは、
@tel : #aaa; #header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px; color: @tel} } } }
のように書いたコードを
#header h1 { font-size: 26px; font-weight: bold; } #header p { font-size: 12px; } #header p a { text-decoration: none; } #header p a:hover { border-width: 1px; color: #aaaaaa; }
のようにコンパイルすることができるメタ言語です。
Macユーザの方はLess.appというGUIツールもあるので、
簡単にLESSを試すことができます。
less.jsを用意すればクライアントサイドでのコンパイルもできます。
便利ですね。
こいつは便利だ!!
ってことで使い始めたのですが、IEのためにfilterで下記のようなグラデーションを書いた時にエラーがでました。
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f9fe', endColorstr='#d6f0fd',GradientType=0 );
対処法
以下のようにダブルコーテーションでくくってあげればLESS.app、less.jsではエスケープしてくれました。
filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f9fe', endColorstr='#d6f0fd',GradientType=0 )";