離島好きフロントエンドエンジニアの備忘録的blog
1
2月
2012
プロパティの値を変数として扱うことができます。
さらに数値の加減乗除ができます。
//.less @color : #5B83AD; #header { color:@color } //.css #header { color:#5B83AD }
※LESSの変数は正確には定数なので、一度値を挿入後は変更ができないです。
ある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文のようなことができます。
//.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」を設定しています。その場合、
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)
数値の値に使用できる関数です。
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");
.class { filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()"; }
@import "lib.less"; //読み込み以降、読み込んだlessファイルの機能が使える
Tags:LESS