LESS 命名参数
LESS 命名参数
混合使用它们的名称提供参数值而不是位置。参数没有顺序,它们可以通过名称引用。命名参数的结果可读性更强。
例子
<!doctype html> <head> <title>Named Parameters</title> <link rel = "stylesheet" href = "style.css" type = "text/css" /> </head> <body> <h2>Example of Named Parameters</h2> <p class = "class1">Hello World...</p> <p class = "class2">Welcome to Tutorialspoint...</p> </body> </html>
接下来创建style.less文件.
/*style.less*/
.mixin(@color: black; @fontSize: 10px) {
color: @color;
font-size: @fontSize;
}
.class1 {
.mixin(@fontSize: 20px; @color: #F5A9D0);
}
.class2 {
.mixin(#F79F81; @fontSize: 20px);
}使用下面的命令编译less文件
lessc style.less style.css
得到css文件
/*style.css*/
.class1 {
color: #F5A9D0;
font-size: 20px;
}
.class2 {
color: #F79F81;
font-size: 20px;
}输出
执行下面的步骤:
保存上面html代码到named_param.html文件.
在浏览器中运行,查看结果.
