less に関する子ネタ

f:id:tenman:20120329130335p:image:medium:left

lessPHP を搭載したWordPressテーマ obandesでless を使うとこんな事が出来るよというスニペットを書いたのですが、その件について、


obandes0.99のアップデートで、それぞれの投稿から、その投稿を表示された時にだけ適用されるless スタイルを書く事が出来るようになりました。

lessという名前のカスタムフィールドを作成して、値にlessのコードを書く事が出来ます。



テーマオプションパネルのCSSエディタに、ブログ全体で使うようなmix inなどを記述しておいて、個別ページで使いまわす事が出来るよという考え方です。


CSSで、特殊なグラデーションを書いたりすると、ベンダープレフィックスを含んだスタイルルール一々書かなくてはなりません、再利用性も乏しいものですが、lessを使うと

.examples{
.bg-arrow();
.title-entry();
width:100%;
height:168px;
padding-top:100px;

}


.bg-arrow();と書くだけで、スタイルをピンポイントで充てられます。

画像を、background:url(http://....);と書く感覚で、ふくざつなCSSを使いまわせますよ。


さらに、bodyには、ブラウザ名のクラスが自動的に入ってしまうので、例示のようなやんちゃなスタイルを書いても、IEのレイアウトがぶっ飛んでしまうという事も、何とかなってしまうわけです。


ということで、obandes テーマ使ってちょーだい


TOP