カテゴリー:
LESS
閲覧数:929 配信日:2014-10-31 17:44
変数の演算
対象
・プロパティの値
▼/styles.less
/*
コメント
コメント
コメント
コメント
*/
// コメント
@mycolor: red;
@h1-size: 24px;
@h2-size: @h1-size - 4px;
h1{
font-size: @h1-size;
color: @mycolor;
}
h2{
font-size: @h2-size;
color: @mycolor;
}
$ lessc styles.less styles.css
▼/styles.css/*
コメント
コメント
コメント
コメント
*/
h1 {
font-size: 24px;
color: #ff0000;
}
h2 {
font-size: 20px;
color: #ff0000;
}
・1行コメントが削除される理由は不明
・「@h1-size - 4px;」のマイナス前後に半角スペース必須
LESSの関数
▼/styles.less
/*
コメント
コメント
コメント
コメント
*/
// コメント
@h1-color: red;
@h2-color: darken(@h1-color,10%);
@h1-size: 24px;
@h2-size: @h1-size - 4px;
h1{
font-size: @h1-size;
color: @h1-color;
}
h2{
font-size: @h2-size;
color: @h2-color;
}
$ lessc styles.less styles.css
▼/styles.css/*
コメント
コメント
コメント
コメント
*/
h1 {
font-size: 24px;
color: #ff0000;
}
h2 {
font-size: 20px;
color: #cc0000;
}