Edited at

CSS→Stylusを学ぶまでの軌跡③ LESS

More than 3 years have passed since last update.


LESS

LESS

-「SCSS(Sass)」に比べると非常にシンプルな記法

- JavaScriptを利用したクライアントサイドでの動的なCSSの生成ができる。

- 「node.js」の利用も可能。


概要


  • CSSを効率的に書く為のツール

  • LESS:style.less →(コンパイル:lessc)→ CSS:style.css


公式サイト


知識


  • CSS/HTML

  • Javascript/Node.js/npm


環境(インストール)


console

$ node -v

v0.10.26
$ node -v
v0.10.26
$ sudo npm install -g less
less@2.5.3 /Users/shokokb/.nvm/v0.10.26/lib/node_modules/less
├── graceful-fs@3.0.8
├── mime@1.3.4
├── image-size@0.3.5
├── errno@0.1.4 (prr@0.0.0)
├── promise@6.1.0 (asap@1.0.0)
├── source-map@0.4.4 (amdefine@1.0.0)
├── mkdirp@0.5.1 (minimist@0.0.8)
└── request@2.64.0 (aws-sign2@0.5.0, forever-agent@0.6.1, caseless@0.11.0, stringstream@0.0.4, tunnel-agent@0.4.1, oauth-sign@0.8.0, isstream@0.1.2, json-stringify-safe@5.0.1, extend@3.0.0, node-uuid@1.4.3, qs@5.1.0, combined-stream@1.0.5, tough-cookie@2.0.0, form-data@1.0.0-rc3, bl@1.0.0, mime-types@2.1.7, http-signature@0.11.0, hawk@3.1.0, har-validator@1.8.0)
$ lessc -v
lessc 2.5.3 (Less Compiler) [JavaScript]


ビルド方法


  • node.jsを使ってサーバサイドでビルドする方法

  • less.jsを使ってブラウザでビルドする方法(ブラウザ依存の為、非推奨

  • ツールを使ってローカルでビルドする方法


フォルダ構成

 +- style.less(変換前)

+- style.css (変換後)


コンパイルコマンド


console

$ lessc style.less style.css

# lessc (変換前のファイル) (変換後のファイル)
$ lessc -x style.less style.css
# コンパイルオプション -x : 圧縮する。


style.less

@mycolor: red;

h1{
font-size: 24px;
color: @mycolor;
}

h2 {
font-size: 24px;
color: @mycolor;
}


 ↓ コンパイル


style.css

@mycolor: red;

h1{
font-size: 24px;
color: @mycolor;
}

h2 {
font-size: 20px;
color: @mycolor;
}



コメント/四則演算/関数


style.less

/*

複数行 コメント
*/
// 単行 コメント
@h1-color:red;
@h2-color: darken(@h1-color, 10%);
@h1-size: 24px;
@h2-size: @h1-size - 8px;

h1{
font-size: @h1-size;
color: @h1-color;
}

h2 {
font-size: @h2-size;
color: @h2-color;
}



style.css

/*

複数行 コメント
*/

h1 {
font-size: 24px;
color: red;
}
h2 {
font-size: 16px;
color: #cc0000;
}


mixin


  • mixinには引数をつける事ができる。

  • mixinの後方に括弧をつけると、CSSには出力されない。

  • コロン(:)の後ろに初期値を付加できる。

  • 引数は「@引数名:値」の形で、順不同にできる。


style.less

// クラスをつくる。

.my-mixin(@weight: 5px; @padding: 7px) {
border: @weight solid red;
padding: @padding;
margin: 7px;
}

#my-mixin-id() {
color: yellow;
}

h1 {
font-size: 24px;
.my-mixin();
#my-mixin-id();
}

h2 {
font-size: 20px;
.my-mixin(@padding:20px, @weight:3px);
#my-mixin-id();
}



style.css

h1 {

font-size: 24px;
border: 5px solid red;
padding: 7px;
margin: 7px;
color: yellow;
}
h2 {
font-size: 20px;
border: 3px solid red;
padding: 20px;
margin: 7px;
color: yellow;
}


継承


style.less

// .button {

// font-size: 14px;
// border: 1px solid black;
// &-ok {
// color:green;
// }
// &-ng {
// color: red;
// }
// }
.button {
font-size: 14px;
border: 1px solid black;
}

.button-ok {
&:extend(.button);
color:green;
}
.button-ng {
&:extend(.button);
color: red;
}



style.css

.button,

.button-ok,
.button-ng {
font-size: 14px;
border: 1px solid black;
}
.button-ok {
color: green;
}
.button-ng {
color: red;
}




SASS & LESS 比較