bootstrapでも採用されているCSSの拡張メタ言語「LESS」でよく使う関数や書き方など

CSSの拡張メタ言語は、LESSの他にもSass(SCSS)等有りますが、ここ数年でレスポンシブサイトや大規模サイトを作る場合、個人的には必須になっています。

LESSは変数や関数も使うことができるので、CSSでよりも少し頭は使いますが、慣れてしまえばbootstrapをカスタムするにも、公開後の保守を考えても使えたほうが断然有利になります。

less

LESS???って方はこちら

LESSの書き方

コンパイル前のLESS

//変数
@base: #f938ab;
//mixins
.box-shadow(@style, @c) when (iscolor(@c)) {
box-shadow:         @style @c;
-webkit-box-shadow: @style @c;
-moz-box-shadow:    @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
//class
.box { 
color: saturate(@base, 5%);
border: 1px solid lighten(@base, 30%);
.box-shadow(0 0 5px, #ccc);
&:hover{
.box-shadow(0 0 5px, 30%);
.border-radius(5px);
border: 1px solid lighten(@base, 10%);
color: saturate(@base, 5%);
}
&.active{
.box-shadow(0 0 5px, #000);
&+.item{
display: none;
}
}
}

コンパイル後のCSS

.box {
color: #fe33ac;
border: 1px solid #fdcdea;
box-shadow: 0 0 5px #cccccc;
-webkit-box-shadow: 0 0 5px #cccccc;
-moz-box-shadow: 0 0 5px #cccccc;
}
.box:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #fa6ac0;
color: #fe33ac;
}
.box.active {
box-shadow: 0 0 5px #000000;
-webkit-box-shadow: 0 0 5px #000000;
-moz-box-shadow: 0 0 5px #000000;
}
.box.active + .item {
display: none;
}

カラー関数

LESSには色を変換するための関数があります。色はまずHSLカラースペースに変換され、チャネルレベルで操作することができます:
LESS – The Dynamic Stylesheet language

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度色相が小さい値を返します
mix(@color1, @color2);    //@color1と@color2をミックスした値を返します
contrast(@color1, @darkcolor, @lightcolor); 
// もし@color1が >50%以上のluma(例: 明るい色)の場合に@darkcolorを返し、
// そうでなければ@lightcolorを返します

使い方

@base: #f04615;
.class {
color: saturate(@base, 5%);
background-color: lighten(spin(@base, 8), 25%);
}

色の情報を抽出

hue(@color);        // @colorの色相チャネルの値を返します
saturation(@color); // @colorの彩度チャネルの値を返します
lightness(@color);  // @colorの明度チャネルの値を返します
alpha(@color);      // @colorの透明度チャネルの値を返します
luma(@color);       // @colorのluma値(知覚明度)を返します

使い方

@new: hsl(hue(@old), 45%, 90%);

Math関数

LESSは数字の値に対して利用できる便利なmath関数を用意しています:
LESS – The Dynamic Stylesheet language

round(1.67); // `2` を返します
ceil(2.4);   // `3` を返します
floor(2.6);  // `2` を返します
percentage(0.5); // `50%` を返します

使い方

@font-size-base:          14px;
@font-size-large:         ceil(@font-size-base * 1.25); // ~18px
@font-size-h1:            floor(@font-size-base * 2.60); // ~36px

名前空間

構成やカプセル化のために変数やミックスインをグループ化する必要があることがあります。
LESSではそれを直感的に行うことがでます。例えば配布目的や再利用の際に#bundle以下に変数やミックスインを1つにまとめたいとします:
LESS – The Dynamic Stylesheet language

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

使い方

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

スコープ

LESSにおけるスケープはほかのプログラム言語と似ています。変数やミックスインはローカル内をまず検索し、見つからなければ 親スコープを検索します。
LESS – The Dynamic Stylesheet language

@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
#footer {
color: @var; // red  
}

文字列の挿入

変数はrubyやPHPと同じように@{name}と定義することで文字列を挿入することができます:
LESS – The Dynamic Stylesheet language

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

19 − 13 =