{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)
 .sc...
LESSを拡張
LESS(css)に対する不満
 @side : 10px
 margin-right: @side;
 margin-left: @side;
汚い
LESS(css)に対する不満
 (mixins.less)
 .rotate(@degrees) {
 -webkit-transform: rotate(@degrees);
 -ms-transform: rotate(@degr...
プログラミング精神
「同じコードを
二度書くな」
新しいルールの提案
 .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;
考察:デメリット
 可読性が落ちる?
 編集しにくい
おわり
Upcoming SlideShare
Loading in …5
×

{LESS}をちょっと拡張してみた

418 views

Published on

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

Published in: Engineering, Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
418
On SlideShare
0
From Embeds
0
Number of Embeds
98
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

{LESS}をちょっと拡張してみた

  1. 1. {LESS}をちょっと拡張してみた えるざっぷ@Arzzup
  2. 2. 内容 LESSとは? LESS.jsをいじってみた
  3. 3. LESSとは?
  4. 4. LESSとは?  CSSのメタ言語  CSSを便利にかける!  LESSファイル→CSS  コンパイル  lessc(node.js npm)  Less.js
  5. 5. どんな風に書けるの?
  6. 6. LESS
  7. 7. LESS
  8. 8. Mixin
  9. 9. Mixin
  10. 10. Mixin
  11. 11. Mixin
  12. 12. TwitterBootstrap > mixins.less  .size(@height:5px, @width:5px)  .border-radius(@radius:5px)  .box-shadow(@shadow)  .scale(@ratio)  .translate(@x:0, @y:0)
  13. 13. LESSを拡張
  14. 14. LESS(css)に対する不満  @side : 10px  margin-right: @side;  margin-left: @side; 汚い
  15. 15. LESS(css)に対する不満  (mixins.less)  .rotate(@degrees) {  -webkit-transform: rotate(@degrees);  -ms-transform: rotate(@degrees);  transform: rotate(@degrees);  } 汚い
  16. 16. プログラミング精神 「同じコードを 二度書くな」
  17. 17. 新しいルールの提案  .hoge,.huga { …}  ↑セレクタ一括指定  hoge,huga: rule  ↑ルールの一括指定  例 height,width: 100px;
  18. 18. Less.jsをいじる  Javascriptのコンパイラのみ  less-1.7.0.js
  19. 19. less.jsをいじる
  20. 20. less.jsをいじる
  21. 21. 結果
  22. 22. 結果
  23. 23. 結果
  24. 24. 考察 -webkit-border-radius,-moz-border-radius,-ms- border-radius,-o-border-radius,border-radius: @radius;
  25. 25. 考察:デメリット  可読性が落ちる?  編集しにくい
  26. 26. おわり

×