Más contenido relacionado
Similar a 「LESS」ことはじめ (20)
Más de Eigoro Yamamura (7)
「LESS」ことはじめ
- 1. 『LESS』事はじめ
Creator’s village in Ehime
〜 2012 初夏 〜
12年12月17日月曜日
- 2. 自己紹介!
アイムービックで
Webシステム作ってます。
四国GTUG所属。
骨折り損のくたびれもうけ
http://blog.bornknow.com/
@bornknow108
12年12月17日月曜日
- 3. 今日のお話
CSS拡張メタ言語について
LESSの導入方法
LESSの書きかた
まとめ
12年12月17日月曜日
- 6. メタ言語
→ 言語を定義するための言語
何?意味がわからない
12年12月17日月曜日
- 7. 例えば、Zen-coding
Zen-coding
input:text
HTML
<input type=”text”/>
HTMLという言語を定義するための
Zen-codingという言語
12年12月17日月曜日
- 10. Sass(Syntactically
Awesome Stylesheets)
SCSS(Sassy CSS)
Rubyで実装されたコンパイラ
SassはHAML形式で記述
SCSSはCSS形式で記述
12年12月17日月曜日
- 11. ちなみにHAML形式ってこんなの
HTML/XHTMLを生成するための
マークアップ言語
インデントや簡略構文によって記述
!!!
%html
%head
%title Hello, Haml!
%body
#header
%h1 Hello, Haml!
#content
12年12月17日月曜日
- 13. 今回お話するやつ
JavaScriptで実装された
コンパイラ
CSS形式で記述
詳細はのちほど
12年12月17日月曜日
- 21. 人 気 :大
学習コスト:低
導入コスト:低
だから、 LESS!!
12年12月17日月曜日
- 24. JavaScript
変換用のJavaScriptファイル
を読み込むだけ
12年12月17日月曜日
- 26. ここから
ダウンロード
12年12月17日月曜日
- 27. 使用例
<!-- LESSファイルを指定する -->
<link
rel="stylesheet/less"
type="text/css"
href="styles.less">
<!-- コンパイラを読み込む -->
<script
src="less.js"
type="text/javascript"></script>
12年12月17日月曜日
- 28. メリット
導入が簡単
12年12月17日月曜日
- 29. デメリット
つねに変換が発生するため
重い
クライアントの負荷が上がる
納品がless形式になる
12年12月17日月曜日
- 30. node.js
node.jsのlesscを使ってCSSに
変換する
12年12月17日月曜日
- 31. node.js
日本ユーザー
グループ
12年12月17日月曜日
- 33. 使用例
通常
# lessc hogehoge.less > hogehoge.css
CSSを圧縮する場合
# lessc --compress
hogehoge.less > hogehoge.css
12年12月17日月曜日
- 34. メリット
Web上で読み込むのはCSSに
なる
クライアントの負荷が下がる
12年12月17日月曜日
- 35. デメリット
導入が大変
(LESSのうまみが減る)
環境によっては別途サーバー
が必要
修正ごとに変換が必要する
12年12月17日月曜日
- 36. アプリ
アプリを使って変換する
Windows winless
Mac LESS.app
12年12月17日月曜日
- 37. http://
incident57.com/
less/
12年12月17日月曜日
- 38. http://
winless.org/
12年12月17日月曜日
- 42. メリット
Web上で読み込むのはCSSに
なる
クライアントの負荷が下がる
LESSからの変換を意識しない
でいい
12年12月17日月曜日
- 43. デメリット
とくになし
12年12月17日月曜日
- 45. 変数
ミックスイン その1
ミックスイン その2
ネスト
演算
関数
12年12月17日月曜日
- 46. LESS
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
12年12月17日月曜日
- 47. CSS
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
12年12月17日月曜日
- 48. 変数
ミックスイン その1
ミックスイン その2
ネスト
演算
関数
12年12月17日月曜日
- 49. LESS
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
12年12月17日月曜日
- 50. 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;
}
12年12月17日月曜日
- 51. 変数
ミックスイン その1
ミックスイン その2
ネスト
演算
関数
12年12月17日月曜日
- 52. LESS
.box-shadow (@x: 0, @y: 0,
@blur: 1px, @color: #000) {
box-shadow: @arguments;
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
}
#header {
.box-shadow(2px, 2px);
}
#footer {
.box-shadow(2px, 5px, 2px);
}
12年12月17日月曜日
- 53. CSS
#header {
box-shadow: 2px 2px 1px #000;
-moz-box-shadow: 2px 2px 1px #000;
-webkit-box-shadow: 2px 2px 1px #000;
}
#footer {
box-shadow: 2px 5px 2px #000;
-moz-box-shadow: 2px 5px 2px #000;
-webkit-box-shadow: 2px 5px 2px #000;
}
12年12月17日月曜日
- 54. 変数
ミックスイン その1
ミックスイン その2
ネスト
演算
関数
12年12月17日月曜日
- 55. LESS
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
12年12月17日月曜日
- 56. #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;
}
12年12月17日月曜日
- 57. 変数
ミックスイン その1
ミックスイン その2
ネスト
演算
関数
12年12月17日月曜日
- 58. LESS
@base-border : 1px;
@base-color : #111111;
#header {
border-top: @base-border;
border-left: @base-border * 2;
border-right: @base-border * 2;
border-bottom: @base-border * 3;
}
#footer {
color: @base-color + #003300;
}
12年12月17日月曜日
- 59. CSS
#header {
border-top: 1px;
border-left: 2px;
border-right: 2px;
border-bottom: 3px;
}
#footer {
color: #113311;
}
12年12月17日月曜日
- 60. 変数
ミックスイン その1
ミックスイン その2
ネスト
演算
関数
12年12月17日月曜日
- 61. LESS
@red : #842210;
#footer {
border-color: desaturate(@red, 10%);
}
12年12月17日月曜日
- 62. CSS
@red : #842210;
#footer {
border-color: #7D2717;
}
12年12月17日月曜日
- 63. // @colorより10%明度が高くする
lighten(@color, 10%);
// @colorより10%明度を低くする
darken(@color, 10%);
// @colorに10%の彩度を追加する
saturate(@color, 10%);
// @colorから10%の彩度を削除する
desaturate(@color, 10%);
// @color1 と @color2 をミックスする
mix(@color1, @color2);
12年12月17日月曜日
- 64. // @colorから10%透明度を高くする
fadein(@color, 10%);
// @colorから10%透明度を低くする
fadeout(@color, 10%);
// @colorの50%の透明度にする
fade(@color, 50%);
// @colorから10度色相が大きくする
spin(@color, 10);
// @colorから10度色相が小さくする
spin(@color, -10);
12年12月17日月曜日
- 65. // @colorの色相チャネルを取得する
hue(@color);
// @colorの彩度チャネルを取得する
saturation(@color);
// @colorの明度チャネルの値を取得する
lightness(@color);
// @colorの透明度チャネルの値を取得する
alpha(@color);
12年12月17日月曜日
- 66. 他にもいくつか
できることがあります。
12年12月17日月曜日
- 73. LESSに限らず、
CSSメタ拡張言語は便利!
作業を効率化するならぜひ
できればチームで統一してね!
12年12月17日月曜日
- 74. バグに
ちょっとだけ
気をつけて。
12年12月17日月曜日
- 75. ご清聴
ありがとうございました。
12年12月17日月曜日