{LESS}をちょっと拡張してみたえるざっぷ @Arzzup

内容

LESS とは？LESS.js をいじってみ

た

LESS とは？

LESS とは？

CSS のメタ言語 CSS を便利にかける！ LESS ファイル→ CSS

コンパイル lessc(node.js npm) Less.js

どんな風に書けるの？

LESS

LESS

Mixin

Mixin

Mixin

Mixin

TwitterBootstrap > mixins.less .size(@height:5px, @width:5px) .border-radius(@radius:5px) .box-shadow(@shadow) .scale(@ratio) .translate(@x:0, @y:0)

LESS を拡張

LESS(css) に対する不満

@side : 10px margin-right: @side; margin-left: @side;

汚い

LESS(css) に対する不満

(mixins.less) .rotate(@degrees) { -webkit-transform: rotate(@degrees); -ms-transform: rotate(@degrees); transform: rotate(@degrees); }

汚い

プログラミング精神「同じコードを

二度書くな」

新しいルールの提案

.hoge,.huga { …} ↑ セレクタ一括指定

hoge,huga: rule ↑ ルールの一括指定 例 height,width: 100px;

Less.js をいじる

Javascript のコンパイラのみ less-1.7.0.js

less.js をいじる

less.js をいじる

結果

結果

結果

考察

-webkit-border-radius,-moz-border-radius,-ms-border-radius,-o-border-radius,border-radius: @radius;

考察 : デメリット

可読性が落ちる？ 編集しにくい

おわり