less楽しいれす(＾q＾)
DESCRIPTION
kanazawa.js vol1.7 at kanazawakagekiza 15minTRANSCRIPT
kanazawa.js v1.7
LESS 楽しいれす (^p^)taiju @ kanazawa.js v1.7
kanazawa.js v1.7
自己紹介
@name: "東 大樹 <Higashi Taiju>";@current: "BaseLine, Inc.";@blog: "あと味";@twitter: "@taiju";@facebook: "taiju.higashi";
kanazawa.js v1.7
アジェンダ
• LESS はやめぐり• LESS is JavaScript
kanazawa.js v1.7
アジェンダ
• LESS はやめぐり• LESS is JavaScript
kanazawa.js v1.7
LESSってなんれすか？
変数、ミックスイン、演算、関数のような動的な振る舞いを、CSSに拡張したCSS拡張メタ言語。
kanazawa.js v1.7
LESSってなんれすか？
Bootstrap
kanazawa.js v1.7
拡張ってなんれすか？
• 変数• ミックスイン• ネストルール• 関数と演算
kanazawa.js v1.7
具体的に知りたいれす！
具体例を交えて
LESSの「はやめぐり」をしましょう
kanazawa.js v1.7
拡張ってなんれすか？
• 変数• ミックスイン• ネストルール• 関数と演算
kanazawa.js v1.7
変数
/* CSS */#header { color: #4D926F;}h2 { color: #4D926F;}
CSSの記法
kanazawa.js v1.7
変数
// LESS@color: #4D926F;
#header { color: @color;}h2 { color: @color;}
LESSの記法
kanazawa.js v1.7
拡張ってなんれすか？
• 変数• ミックスイン• ネストルール• 関数と演算
kanazawa.js v1.7
ミックスイン
/* 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;}
CSSの記法
kanazawa.js v1.7
ミックスイン
// LESS.rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius;}
#header { .rounded-corners;}#footer { .rounded-corners(10px);}
LESSの記法
kanazawa.js v1.7
拡張ってなんれすか？
• 変数• ミックスイン• ネストルール• 関数と演算
kanazawa.js v1.7
ネストルール
/* 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;}
CSSの記法
kanazawa.js v1.7
ネストルール
// LESS#header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } }}
LESSの記法
kanazawa.js v1.7
拡張ってなんれすか？
• 変数• ミックスイン• ネストルール• 関数と演算
kanazawa.js v1.7
関数と演算
/* CSS */#header { color: #333; border-left: 1px; border-right: 2px;}#footer { color: #114411; border-color: #7d2717;}
CSSの記法
kanazawa.js v1.7
関数と演算
// 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}
LESSの記法
kanazawa.js v1.7
LESSを使用する
<link rel="stylesheet/less" type="text/css" href="styles.less"><script src="less.js" type="text/javascript"></script>
script要素とlink要素で使用する
ただし、読み込みや実行に時間がかかるため、実務には向かない使用方法れす
kanazawa.js v1.7
LESSを使用する
$ lessc styles.less > styles.css
lesscコマンドでcssにコンパイルする
ただし、インストールやコマンドの実行に黒い画面が必要れすあと、毎回このコマンド打つのめんどいれす
kanazawa.js v1.7
LESSを使用する
less.app
CodeKit
SimpLESS
WinLess
GUIアプリを利用する
kanazawa.js v1.7
LESSはやめぐりまとめ
今回の紹介したのは概要だけ
詳しくはLESSのドキュメントで！
本家: http://lesscss.org/日本語訳: http://less-ja.studiomohawk.com/
kanazawa.js v1.7
アジェンダ
• LESS はやめぐり• LESS is JavaScript
kanazawa.js v1.7
LESSはJavaScriptれす
githubにソースが置いてあります
kanazawa.js v1.7
LESSはJavaScriptれす機能追加してpull requestしてる人も
kanazawa.js v1.7
LESSはJavaScriptれす
見えるぞ・・・私にも敵が見える！
JavaScriptだからなんとか読めそう！
kanazawa.js v1.7
LESSはJavaScriptれす
JavaScriptの関数が使えます
@var: `“hello”.toUpperCase() + ‘!’`;@height: `document.body.clientHeight`;
kanazawa.js v1.7
全体まとめ
LESS 楽しいれす (^p^)