前半 LESSについての説明 後半 LESSの拡張 ルールの一括指定ができるようにless-1.7.0.jsを改変

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

2. 内容
LESSとは？
LESS.jsをいじってみた

3. LESSとは？

4. LESSとは？
 CSSのメタ言語
 CSSを便利にかける！
 LESSファイル→CSS
 コンパイル
 lessc(node.js npm)
 Less.js

5. どんな風に書けるの？

6. LESS

7. LESS

8. Mixin

9. Mixin

10. Mixin

11. Mixin

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

13. LESSを拡張

14. LESS(css)に対する不満
 @side : 10px
 margin-right: @side;
 margin-left: @side;
汚い

15. LESS(css)に対する不満
 (mixins.less)
 .rotate(@degrees) {
 -webkit-transform: rotate(@degrees);
 -ms-transform: rotate(@degrees);
 transform: rotate(@degrees);
 }
汚い

16. プログラミング精神
「同じコードを
二度書くな」

17. 新しいルールの提案
 .hoge,.huga { …}
 ↑セレクタ一括指定
 hoge,huga: rule
 ↑ルールの一括指定
 例 height,width: 100px;

18. Less.jsをいじる
 Javascriptのコンパイラのみ
 less-1.7.0.js

19. less.jsをいじる

20. less.jsをいじる

21. 結果

22. 結果

23. 結果

24. 考察
-webkit-border-radius,-moz-border-radius,-ms-
border-radius,-o-border-radius,border-radius:
@radius;

25. 考察:デメリット
 可読性が落ちる？
 編集しにくい

26. おわり