「LESS」ことはじめ

『LESS』事はじめ
Creator’s village in Ehime
〜 2012 初夏〜

12年12月17日月曜日

自己紹介！
アイムービックで
Webシステム作ってます。

四国GTUG所属。

骨折り損のくたびれもうけ
http://blog.bornknow.com/

@bornknow108


今日のお話
CSS拡張メタ言語について
LESSの導入方法
LESSの書きかた
まとめ


CSS拡張メタ言語
について


CSS拡張メタ言語？


メタ言語
→ 言語を定義するための言語

何？意味がわからない


例えば、Zen-coding
Zen-coding
input:text
HTML
<input type=”text”/>

HTMLという言語を定義するための
Zen-codingという言語


じゃあ、あらためて
CSS拡張メタ言語をご紹介


Sass/SCSS


Sass(Syntactically
Awesome Stylesheets)
SCSS(Sassy CSS)
Rubyで実装されたコンパイラ
SassはHAML形式で記述
SCSSはCSS形式で記述


ちなみにHAML形式ってこんなの
HTML/XHTMLを生成するための
マークアップ言語
インデントや簡略構文によって記述
!!!
%html
%head
%title Hello, Haml!
%body
#header
%h1 Hello, Haml!
#content


LESS


今回お話するやつ
JavaScriptで実装された
コンパイラ
CSS形式で記述
詳細はのちほど


Stylus


node.js版Sassの作者が
開発
node.jsで実装された
コンパイラ
CSS形式で記述


この他にも、TASS(JavaScript)とか
PCSS(PHP)などがあります。


いろいろあるよね
どうして
LESSなの？


Googleトレンド

人気がある


CSS形式だから
ぱっと見て
分かりやすい！


JavaScriptで動く！
環境構築しなくても
大丈夫！


人　気　：大
学習コスト：低
導入コスト：低

だから、 LESS!!


導入方法


方法は３つ！


JavaScript
変換用のJavaScriptファイル
を読み込むだけ


本家サイトへ


ここから
ダウンロード


使用例

<link
rel="stylesheet/less"
type="text/css"
href="styles.less">


<script
src="less.js"
type="text/javascript"></script>

メリット
導入が簡単


デメリット
つねに変換が発生するため
重い
クライアントの負荷が上がる
納品がless形式になる


node.js
node.jsのlesscを使ってCSSに
変換する


node.js
日本ユーザー
グループ


以下、略


使用例
通常
# lessc hogehoge.less > hogehoge.css

CSSを圧縮する場合
# lessc --compress
hogehoge.less > hogehoge.css


メリット
Web上で読み込むのはCSSに
なる
クライアントの負荷が下がる


デメリット
導入が大変
(LESSのうまみが減る)
環境によっては別途サーバー
が必要
修正ごとに変換が必要する


アプリ
アプリを使って変換する
Windows winless
Mac LESS.app


http://
incident57.com/
less/


http://
winless.org/


LESSファイルを
指定


エディタで保存


CSSファイルが
生成される


メリット
Web上で読み込むのはCSSに
なる
クライアントの負荷が下がる
LESSからの変換を意識しない
でいい


デメリット
とくになし


書きかた


変数
ミックスインその１
ミックスインその２
ネスト
演算
関数


LESS
@color: #4D926F;

#header {
color: @color;
}
h2 {
color: @color;
}


CSS
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}


LESS
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}


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;
}


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);
}


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;
}


LESS
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}


#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;
}

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;
}


CSS
#header {
border-top: 1px;
border-left: 2px;
border-right: 2px;
border-bottom: 3px;
}

#footer {
color: #113311;
}


LESS
@red : #842210;
#footer {
border-color: desaturate(@red, 10%);
}


CSS
@red : #842210;
#footer {
border-color: #7D2717;
}


// @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);


// @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);


// @colorの色相チャネルを取得する
hue(@color);
// @colorの彩度チャネルを取得する
saturation(@color);
// @colorの明度チャネルの値を取得する
lightness(@color);
// @colorの透明度チャネルの値を取得する
alpha(@color);


他にもいくつか
できることがあります。


効率的に学ぶなら


本家サイト


Twitter
Bootstrap


github


less配下にあるよ


まとめ


LESSに限らず、
CSSメタ拡張言語は便利！
作業を効率化するならぜひ
できればチームで統一してね！


バグに
ちょっとだけ
気をつけて。


ご清聴
ありがとうございました。


「LESS」ことはじめ

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (11)

Semelhante a 「LESS」ことはじめ

Semelhante a 「LESS」ことはじめ (20)

Mais de Eigoro Yamamura

Mais de Eigoro Yamamura (7)

「LESS」ことはじめ