Less
- 5. LESSってなんぞ?
The dynamic styleseet language
「LESSは変数、ミックスイン、演算、そして関数の
ような動的な処理をCSSに追加拡張できます」
(http://less-ja.studiomohawk.com/ )
・変数 ・ミックスイン(Mixin)
・入れ子 ・関数と演算
- 8. LESSってなんぞ?
■入れ子
セレクタの中にセレクタを入れて、継承を指定。
//書き方
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p {
font-size: 12px;
a {
text-decolation: none;
&:hover {
border-width: 1px;
}
}
}
}
//コンパイル後
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decolation: none;
}
#header p a:hover {
border-width: 1px;
}
- 20. ③ミックスインと引数
//コンパイル後
.box-shadow2 {
box-shadow: box-shadow(2px 5px
10px 12px #888);
-moz-box-shadow: box-shadow(2px
5px 10px 12px #888);
-webkit-box-shadow: box-
shadow(2px 5px 10px 12px #888);
background: #aacccc;
width: 300px;
height: 100px;
}
//書き方
.box-shadow (@arg) {
box-shadow: @arg;
-moz-box-shadow: @arg;
-webkit-box-shadow: @arg;
background: #aacccc;
width: 300px;
height: 100px;
}
.box-shadow2 {
.box-shadow(2px 5px 10px 12px #888);
}
※ .box-shadow (@x:0,@y:0,@blur:10px,@color: #000) { …… と書く記述方法もあるが、blurの値が調整できない。
- 22. ③ミックスインと引数
本物の(?)条件分岐もできます。
//コンパイル後
. kyoutyou {
font-size: 20px;
background: #ff0000;
}
// @kuma: 15px の場合
. kyoutyou {
font-size: 15px;
}
//書き方
@kuma: 30px;
.mixin(@kuma) when (@kuma < 20px) {
font-size: @kuma;
}
.mixin(@kuma) when (@kuma >= 20px) {
font-size: 20px;
background: #ff0000;
}
.kyoutyou {
.mixin(@kuma);
}
- 23. ③ミックスインと引数
本物の(?)条件分岐もできます。
// 条件分岐は、以下のようなオプション?を持っています。
.mixin (@kuma) when (@kuma > 10), (@kuma < 10) { …… } // 「,」でorのような感じ
.mixin (@kuma) when (isnumber(@kuma) ) and ( @kuma > 10) { …… } // 見てそのまま
.mixin (@kuma) when not (@kuma > 0) { …… } // 否定
@kuma: mobile;
.mixin (@kuma) when (@kuma = mobile) { …… } //文字列評価
@kuma: 10;
.mixin (@kuma) when (isnumber(@kuma)) { …… } //タイプ評価
※タイプ評価は以下の通り
・iscolor ・isnumber・isstring ・iskeyword
・isurl ・ispixel ・ispercentage ・isem
※whenは全ての条件に当てはまらない値が入ると、エラーを起こします。orz
- 26. ⑥名前空間なるもの
別の場所で、クラスやIDの中身を呼び出せる。
//コンパイル後
#header a {
color: #FFa500;
display: block;
border: 1px solid #000000;
background: #666666;
}
#header a:hover {
color: #FFa500;
display: block;
border: 1px solid #000000;
background: #FFFFFF;
}
//書き方
#foo {
.button(){
display: block;
border: 1px solid #000000;
background: #666666;
&:hover {
background: #FFFFFF;
}
}
}
#header a {
color:#FFa500;
#foo > .button;
}