離島に住みたいFEブログ

less,sassやcompassが最近話題なので、以前入れておいたlessについてしっかり学ぼうと思います。
lessはsass,compassに比べて簡易なようですが、全部の機能を見るとかなり使えそうな印象。機能もたくさんあるし。
文法はネイティブCSSに近いので習得コストは低い。less以上の機能が必要になった時にsassやcompassを学べば良いし、
まずはlessの全機能を把握して、実務に取り入れながら習得・効率化していこうと思います。

変数

プロパティの値を変数として扱うことができます。
さらに数値の加減乗除ができます。

//.less
@color : #5B83AD;
#header {
	color:@color
}

//.css
#header {
	color:#5B83AD
}

※LESSの変数は正確には定数なので、一度値を挿入後は変更ができないです。

Mixin

あるclassに定義してあるプロパティを、別のclassやidのプロパティとして定義することができます。

//.less
.bordered {
    border-top:dotted 1px #000;
    border-bottom:solid 2px #000;
}

#menu a {
    color:#111;
    .bordered;
}

.post a {
    color:red;
    .bordered;
}

//.css
.bordered {
  border-top: dotted 1px #000;
  border-bottom: solid 2px #000;
}
#menu a {
  color: #111;
  border-top: dotted 1px #000;
  border-bottom: solid 2px #000;
}
.post a {
  color: red;
  border-top: dotted 1px #000;
  border-bottom: solid 2px #000;
}

 

パラメータを受け取る

パラメータを受け取り、プロパティの値を自由に設定することができます。
パラメータに初期値を設定することができ、パラメータ付きで呼び出すとパラメータの値が設定され、パラメータ無しだと初期値が設定されます。

//.less
.border-radius (@radius: 5px) {
    border-radius:@radius;
    -moz-border-radius:@radius;
    -webkit-border-radius:@radius
}

#header {
	.border-radius(10px);
}

//.css
#header {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

box-shadow等の値を複数設定できるプロパティに対しては変数「@arguments」を利用することで定義できます。
Mixin内において変数「@arguments」はすべてのパラメータを含みます。

//.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, 5px);
}

//.css
#header {
  box-shadow: 2px 5px 1px #000000;
  -moz-box-shadow: 2px 5px 1px #000000;
  -webkit-box-shadow: 2px 5px 1px #000000;
}

 

switch文風

第一引数にキーワードを設定すると、switch文のようなことができます。

//.less
.mixin (lineon,@color) {
	color:@color;
	text-decoration:underline
}

.mixin (lineoff,@color) {
	color:@color;
	text-decoration:none
}

//@を付けると、どのキーワードでも定義される
.mixin (@_,@color) {
	display:block
}

@switch: lineoff;
.class {
	.mixin(@switch,#f00)
}

//.css
.class {
  color: #ff0000;
  text-decoration: none;
  display: block;
}

上記の挙動はキーワードとして「lineoff」を設定しています。その場合、

• キーワード「lineon」の.mixinクラスはキーワードと違うので定義されない
• キーワード「lineoff」の.mixinクラスはキーワードと一致するので定義される
• 共通の.mixinクラスが定義される

パラメータの数で定義するclassを変える

mixinクラス呼び出し時のパラメータの数で、定義されるclassを変えることができます。

//.less
.mixin (@a) {
	color:@a
}

.mixin (@a,@b) {
	color:@a;
	font-size:@b
}

.class1 {
	.mixin(#f00);
}

.class2 {
	.mixin(#f00,16px);
}

//.css
.class1 {
  color: #ff0000;
}
.class2 {
  color: #ff0000;
  font-size: 16px;
}

条件分岐

条件分岐は「when」キーワードを使います。
注意点として、条件分岐の結果がfalseになり、どのmixinクラスにもマッチしない状態はエラーになります。

//.less
.mixin(@a) when (@a >= 50px) {
  background-color: black;
}
.mixin (@a) when (@a < 50px) {
  background-color: white;
}
.mixin (@a) {
  font-size: @a;
}
.class {
     .mixin(40px);
}

//.css
.class {
  background-color: white;
  font-size: 40px;
}

以下、条件分岐のバリエーションです。

//or文　カンマで区切るとor文になります。
.mixin (@a) when (@a > 10), (@a < -10) { … }

//and文  and　キーワードを使います。
.mixin (@a) when (isnumber(@a)) and (@a > 0) { … }

//否定文 when not を使います。
.mixin (@b) when not (@b > 0) { … }

//文字列の評価もできます。
@media: mobile;
.mixin (@a) when (@media = mobile) { … }
.mixin (@a) when (@media = desktop) { … }

//タイプを評価できます。
.mixin (@a, @b: 0) when (isnumber(@b)) { … }
.mixin (@a, @b: black) when (iscolor(@b)) { … }
//以下の種類があります。
iscolor
isnumber
isstring
iskeyword
isurl
ispixel
ispercentage
isem

ネストルール

セレクタのネスト機能です。
冗長的に何度も同じセレクタを入力する必要がなくなります。

//.less
#header        { color: black;
  .navigation  { font-size: 12px }
  .logo        { width: 300px;
    &:hover    { text-decoration: none }
  }
}

//.css
#header { color: black; }
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
#header .logo:hover {
  text-decoration: none;
}

オペレーション

数や色を計算することができます。

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base + #111;
height: 100% / 2 + @filler;

カラー機能

カラーを変換できる機能が用意されています。

lighten(@color, 10%)	@colorより10%明るい色
darken(@color, 10%)	@colorより10%暗い色
saturate(@color, 10%)	@colorより10%彩度が高い色
desaturate(@color, 10%)	@colorより10%彩度が低い色
fadein(@color, 10%)	@colorより10%透過が高い色
fadeout(@color, 10%)	@colorより10%透過が低い色
fade(@color, 50%)	@colorより50%透過が低い色
spin(@color, 10)	@colorより色相が10度異なる色
spin(@color, -10)	@colorより色相が-10度異なる色
hsl(50,50%,50%)	新たな色の生成ができる。hsl(色相,彩度,明度)
hue(@color)	@colorの色相を取得
saturation(@color)	@colorの彩度を取得
lightness(@color)	@colorの明度を取得
alpha(@color)	@colorの透明度を取得

※透過が必要な処理はRGBAの表記で指定する必要があります。
例:rgba(255, 0, 0, 0)

Math機能

数値の値に使用できる関数です。

round(1.67)	return 2 : 四捨五入
ceil(2.4)	return 3 : 繰り上げ
floor(2.6)	return 2 : 切り捨て
percentage(0.5)	return 50% : パーセントに変換

ネームスペース

#idにネストしてmixinクラスを定義すると、#idを通して呼び出すことができます。
機能のグループ分けや名前衝突を避ける用途に使えます。

//.less
#bundle {
  .button() {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
}

#header a {
	color :#f00;
	#bundle > .button;
}

//.css
#header a {
  color: #f00;
  display: block;
  border: 1px solid black;
  background-color: grey;
}
#header a:hover {
  background-color: #ffffff;
}

その他機能

文字列補間

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

lessでエラーになるプロパティの使用方法

.class {
  filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

外部読み込み

@import "lib.less";
//読み込み以降、読み込んだlessファイルの機能が使える