カテゴリー:
LESS
閲覧数:706 配信日:2014-11-06 18:30
extend
既に存在するクラスの派生した違うバリエーションを作成
・使用すると、関係性が分かるよう記述することが可能となる
▼/styles.less
// extend
// <div class="button button-ok">OK</div>
// <div class="button-ok">OK</div>
.button {
font-size: 14px;
border: 1px solid black;
}
.button-ok {
&:extend(.button);
corol: green;
}
.button-ng {
&:extend(.button);
corol: red;
}
$ lessc styles.less styles.css
▼/styles.css.button,
.button-ok,
.button-ng {
font-size: 14px;
border: 1px solid black;
}
.button-ok {
corol: green;
}
.button-ng {
corol: red;
}
ミックスイン
ミックスインとの比較
・機能的には同じ
・extendの方が、両者の関係性が分かりやすい
・ミックスインの方がコード量が増加
▼/styles.less
// extend
// <div class="button button-ok">OK</div>
// <div class="button-ok">OK</div>
/*
.button {
font-size: 14px;
border: 1px solid black;
}
.button-ok {
&:extend(.button);
corol: green;
}
.button-ng {
&:extend(.button);
corol: red;
}
*/
.button {
font-size: 14px;
border: 1px solid black;
}
.button-ok {
.button;
corol: green;
}
.button-ng {
.button;
corol: red;
}
$ lessc styles.less styles.css
▼/styles.css/*
.button {
font-size: 14px;
border: 1px solid black;
}
.button-ok {
&:extend(.button);
corol: green;
}
.button-ng {
&:extend(.button);
corol: red;
}
*/
.button {
font-size: 14px;
border: 1px solid black;
}
.button-ok {
font-size: 14px;
border: 1px solid black;
corol: green;
}
.button-ng {
font-size: 14px;
border: 1px solid black;
corol: red;
}