More Related Content
Similar to LESS楽しいれす(^q^) (20)
More from taiju higashi (8)
LESS楽しいれす(^q^)
- 2. 自己紹介
@name: "東 大樹 <Higashi Taiju>";
@current: "BaseLine, Inc.";
@blog: "あと味";
@twitter: "@taiju";
@facebook: "taiju.higashi";
kanazawa.js v1.7
- 3. アジェンダ
• LESS はやめぐり
• LESS is JavaScript
kanazawa.js v1.7
- 4. アジェンダ
• LESS はやめぐり
• LESS is JavaScript
kanazawa.js v1.7
- 8. 具体的に知りたいれす!
具体例を交えて
LESSの「はやめぐり」をしましょう
kanazawa.js v1.7
- 13. ミックスイン
CSSの記法
/* CSS */
#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
kanazawa.js v1.7
- 16. ネストルール
CSSの記法
/* CSS */
#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;
}
kanazawa.js v1.7
- 17. ネストルール
LESSの記法
// LESS
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
kanazawa.js v1.7
- 19. 関数と演算
CSSの記法
/* CSS */
#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}
kanazawa.js v1.7
- 20. 関数と演算
LESSの記法
// LESS
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: @base-color * 3; // #333
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300; // #114411
border-color: desaturate(@red, 10%); // #7d2717
}
kanazawa.js v1.7
- 25. アジェンダ
• LESS はやめぐり
• LESS is JavaScript
kanazawa.js v1.7
- 29. LESSはJavaScriptれす
JavaScriptの関数が使えます
@var: `“hello”.toUpperCase() + ‘!’`;
@height: `document.body.clientHeight`;
kanazawa.js v1.7