免费 AI IDE
LESS Mixins具有多个参数
2018-01-10 10:07 更新
描述
参数可以使用逗号或分号分隔。 使用逗号符号，可以将其解释为mixin参数分隔符或css列表分隔符。 如果在mixin中使用分号，那么它将用分号分隔参数，CSS列表将包含所有逗号。
它包括一些关于分号和逗号的点，如下所示：
如果你有两个参数，那么它们将包含逗号分隔的列表。 例如 .class1(1，2，3; sometext，other thing)。
如果有三个参数，并且只包含数字，例如 .class1(1，2，3)。
您可以使用带有逗号分隔列表的虚拟分号，例如 .class1(1，2，3;)。
有逗号分隔的默认值。 例如 .class1(@color：gray，green;)
语法
.mixin_name(@var_name1; @var_name2:some){
//code here
}
例子
下面的例子演示了在LESS文件中使用mixin多个参数：
<!doctype html> <head> <title>Mixin Multiple Parameters</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <h2>Example of Mixin Multiple Parameters</h2> <p class="myclass">LESS enables customizable, manageable and reusable style sheet for web site.</p> </body> </html>
接下来，创建文件 style.less 。
style.less
.mixin(@color) {
color: @color;
}
.mixin(@color; @padding: 2) {
color: @color;
padding: @padding;
}
.myclass {
.mixin(#FE9A2E);
}
您可以使用以下命令将 style.less 编译为 style.css ：
lessc style.less style.css
接下来执行上面的命令，它将用下面的代码自动创建 style.css 文件：
style.css
.myclass {
color: #FE9A2E;
padding: 2;
}
输出
让我们执行以下步骤，看看上面的代码如何工作：
将上面的html代码保存在 mixin_multiple_param.html 文件中。
在浏览器中打开此HTML文件，将显示如下输出。
以上内容是否对您有帮助：
更多建议：