カテゴリー:
LESS
閲覧数:633 配信日:2014-11-03 22:08
クラス
共通部分をクラスとして部品化
▼/styles.less
// minxin
.my-mixin{
border: 5px solid red;
padding: 7px;
margin: 7px;
}
h1{
font-size: 24px;
.my-mixin;
}
h2{
font-size: 18px;
.my-mixin();
}
$ lessc styles.less styles.css
▼/styles.css.my-mixin {
border: 5px solid red;
padding: 7px;
margin: 7px;
}
h1 {
font-size: 24px;
border: 5px solid red;
padding: 7px;
margin: 7px;
}
h2 {
font-size: 18px;
border: 5px solid red;
padding: 7px;
margin: 7px;
}
id
共通部分をidとして部品化
▼/styles.less
// minxin
#my-mixin{
border: 5px solid red;
padding: 7px;
margin: 7px;
}
h1{
font-size: 24px;
#my-mixin;
}
h2{
font-size: 18px;
#my-mixin();
}
$ lessc styles.less styles.css
▼/styles.css#my-mixin {
border: 5px solid red;
padding: 7px;
margin: 7px;
}
h1 {
font-size: 24px;
border: 5px solid red;
padding: 7px;
margin: 7px;
}
h2 {
font-size: 18px;
border: 5px solid red;
padding: 7px;
margin: 7px;
}
設定非表示
コメントアウトとは異なり、設定自体は反映されるが、自身は非表示
▼/styles.less
// minxin
.my-mixin(){
border: 5px solid red;
padding: 7px;
margin: 7px;
}
h1{
font-size: 24px;
.my-mixin;
}
h2{
font-size: 18px;
.my-mixin();
}
$ lessc styles.less styles.css
▼/styles.cssh1 {
font-size: 24px;
border: 5px solid red;
padding: 7px;
margin: 7px;
}
h2 {
font-size: 18px;
border: 5px solid red;
padding: 7px;
margin: 7px;
}