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文件.
在浏览器中运行,查看结果.