Submit Search
LESS楽しいれす(^q^)
•
11 likes
•
3,150 views
taiju higashi
Follow
kanazawa.js vol1.7 at kanazawakagekiza 15min
Read less
Read more
1 of 30
Download now
Downloaded 21 times
More Related Content
LESS楽しいれす(^q^)
1.
LESS 楽しいれす (^p^)
taiju @ kanazawa.js v1.7 kanazawa.js v1.7
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
5.
LESSってなんれすか? 変数、ミックスイン、演算、関数 のような動的な振る舞いを、 CSSに拡張したCSS拡張メタ言語。
kanazawa.js v1.7
6.
LESSってなんれすか? Bootstrap
kanazawa.js v1.7
7.
拡張ってなんれすか? • 変数 • ミックスイン •
ネストルール • 関数と演算 kanazawa.js v1.7
8.
具体的に知りたいれす!
具体例を交えて LESSの「はやめぐり」をしましょう kanazawa.js v1.7
9.
拡張ってなんれすか? • 変数 • ミックスイン •
ネストルール • 関数と演算 kanazawa.js v1.7
10.
変数 CSSの記法 /* CSS */ #header
{ color: #4D926F; } h2 { color: #4D926F; } kanazawa.js v1.7
11.
変数 LESSの記法 // LESS @color: #4D926F; #header
{ color: @color; } h2 { color: @color; } kanazawa.js v1.7
12.
拡張ってなんれすか? • 変数 • ミックスイン •
ネストルール • 関数と演算 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
14.
ミックスイン LESSの記法 // LESS .rounded-corners (@radius:
5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } #header { .rounded-corners; } #footer { .rounded-corners(10px); } kanazawa.js v1.7
15.
拡張ってなんれすか? • 変数 • ミックスイン •
ネストルール • 関数と演算 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
18.
拡張ってなんれすか? • 変数 • ミックスイン •
ネストルール • 関数と演算 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
21.
LESSを使用する script要素とlink要素で使用する <link rel="stylesheet/less" type="text/css" href="styles.less"> <script
src="less.js" type="text/javascript"></script> ただし、読み込みや実行に時間がかかるため、 実務には向かない使用方法れす kanazawa.js v1.7
22.
LESSを使用する lesscコマンドでcssにコンパイルする $ lessc styles.less
> styles.css ただし、インストールやコマンドの実行に 黒い画面が必要れす あと、毎回このコマンド打つのめんどいれす kanazawa.js v1.7
23.
LESSを使用する GUIアプリを利用する
less.app SimpLESS CodeKit WinLess kanazawa.js v1.7
24.
LESSはやめぐりまとめ 今回の紹介したのは概要だけ 詳しくはLESSのドキュメントで!
本家: http://lesscss.org/ 日本語訳: http://less-ja.studiomohawk.com/ kanazawa.js v1.7
25.
アジェンダ
• LESS はやめぐり • LESS is JavaScript kanazawa.js v1.7
26.
LESSはJavaScriptれす githubにソースが置いてあります
kanazawa.js v1.7
27.
LESSはJavaScriptれす 機能追加してpull requestしてる人も
kanazawa.js v1.7
28.
LESSはJavaScriptれす JavaScriptだからなんとか読めそう!
見えるぞ・・・私にも敵が見える! kanazawa.js v1.7
29.
LESSはJavaScriptれす
JavaScriptの関数が使えます @var: `“hello”.toUpperCase() + ‘!’`; @height: `document.body.clientHeight`; kanazawa.js v1.7
30.
全体まとめ LESS 楽しいれす (^p^)
kanazawa.js v1.7
Download