Mixin(ミックスイン):クラス内の属性値にあらかじめ定義した別のクラス名を指定して組み込み、変数や定数のような振る舞いや、関数のような引数を利用することができます。
.box(@height, @width) {
width: @width;
height: @height;
}
.border-c(@border-color) {
border-color: @border-color;
}
.bg-c(@background-color) {
background-color: @background-color;
}
.narabi {
margin:15px auto;
padding:10px;
border:1px solid;
}
.box01 {
.border-c(blue);
.bg-c(#ccffff);
.box(90px,320px);
}
.box02 {
.border-c(darkgreen);
.bg-c(#ccffcc);
.box(110px,350px);
}
.box03 {
.border-c(red);
.bg-c(#ffffcc);
.box(100px,300px);
}<head> <meta charset="UTF-8"> <title>less.jsを使ったLESSの表示テスト(3)Mixin</title> <link rel="stylesheet/less" type="text/css" href="less-test3.less"> </head> <body> ------中略------- <script src="less.js" type="text/javascript"></script> </body>