カテゴリー:
LESS
閲覧数:883 配信日:2014-11-01 19:52
プロパティ名
変数でプロパティ名を指定
▼/styles.less
@h1-color: red;
@h2-color: darken(@h1-color,10%);
@h1-size: 24px;
@h2-size: @h1-size - 4px;
@header: h;
@color: color;
@{header}1{
font-size: @h1-size;
@{color}: @h1-color;
}
@{header}2{
font-size: @h2-size;
@{color}: @h2-color;
}
$ lessc styles.less styles.css
▼/styles.cssh1 {
font-size: 24px;
color: #ff0000;
}
h2 {
font-size: 20px;
color: #cc0000;
}プロパティ値変更
変数で指定していたプロパティ値を変更
▼/styles.less
@h1-color: red;
@h2-color: darken(@h1-color,10%);
@h1-size: 24px;
@h2-size: @h1-size - 4px;
@header: .myheader;
@color: color;
@{header}1{
font-size: @h1-size;
@{color}: @h1-color;
}
@{header}2{
font-size: @h2-size;
@{color}: @h2-color;
}
$ lessc styles.less styles.css
▼/styles.css.myheader1 {
font-size: 24px;
color: #ff0000;
}
.myheader2 {
font-size: 20px;
color: #cc0000;
}文字列
変数で文字列を指定
▼/styles.less
@h1-color: red;
@h2-color: darken(@h1-color,10%);
@h1-size: 24px;
@h2-size: @h1-size - 4px;
@header: .myheader;
@color: color;
@dir: "/img"; //文字列なので""で囲む
@{header}1{
font-size: @h1-size;
@{color}: @h1-color;
}
@{header}2{
font-size: @h2-size;
@{color}: @h2-color;
background: url("@{dir}/bg.png");
}
$ lessc styles.less styles.css
▼/styles.css.myheader1 {
font-size: 24px;
color: #ff0000;
}
.myheader2 {
font-size: 20px;
color: #cc0000;
background: url("/img/bg.png");
}