カテゴリー:
LESS
閲覧数:940 配信日:2014-11-06 18:11
パラメータ
ミックスインの設定を呼び出すときに変更できるパラメータ
▼/styles.less
// minxin
.my-mixin(@width){
border: @width solid red;
padding: 7px;
margin: 7px;
}
h1{
font-size: 24px;
.my-mixin(5px);
}
h2{
font-size: 18px;
.my-mixin(10px);
}
$ lessc styles.less styles.css
▼/styles.cssh1 {
font-size: 24px;
border: 5px solid #ff0000;
padding: 7px;
margin: 7px;
}
h2 {
font-size: 18px;
border: 10px solid #ff0000;
padding: 7px;
margin: 7px;
}
初期値
パラメータの初期値
▼/styles.less
// minxin
.my-mixin(@width:5px){
border: @width solid red;
padding: 7px;
margin: 7px;
}
h1{
font-size: 24px;
.my-mixin;
}
h2{
font-size: 18px;
.my-mixin(10px);
}
$ lessc styles.less styles.css
▼/styles.cssh1 {
font-size: 24px;
border: 5px solid #ff0000;
padding: 7px;
margin: 7px;
}
h2 {
font-size: 18px;
border: 10px solid #ff0000;
padding: 7px;
margin: 7px;
}
複数パラメータ
パラメータを複数指定
▼/styles.less
// minxin
.my-mixin(@width:5px; @padding:7px){
border: @width solid red;
padding: @padding;
margin: 7px;
}
h1{
font-size: 24px;
.my-mixin;
}
h2{
font-size: 18px;
.my-mixin(10px; 20px);
}
$ lessc styles.less styles.css
▼/styles.cssh1 {
font-size: 24px;
border: 5px solid #ff0000;
padding: 7px;
margin: 7px;
}
h2 {
font-size: 18px;
border: 10px solid #ff0000;
padding: 20px;
margin: 7px;
}
名前付きパラメータ
名前付きパラメータでは、引数の順番は関係ない
▼/styles.less
// minxin
.my-mixin(@width:5px; @padding:7px){
border: @width solid red;
padding: @padding;
margin: 7px;
}
h1{
font-size: 24px;
.my-mixin;
}
h2{
font-size: 18px;
.my-mixin(@padding:10px;
@width:20px);
}
$ lessc styles.less styles.css
▼/styles.cssh1 {
font-size: 24px;
border: 5px solid #ff0000;
padding: 7px;
margin: 7px;
}
h2 {
font-size: 18px;
border: 20px solid #ff0000;
padding: 10px;
margin: 7px;
}