scss-@mixin传参
2024-08-28 20:32:38
混合器一个很重要特性就是可以传递参数，可以根据不同场景来定制css代码的复用。极大提高了混合器的适用性，看如下scss代码实例：
@mixin makeradius($radius) {
border-radius: $radius;
}
antTest{
background-color: blue;
border: 4px solid #ccc;
@include makeradius(8px);
}
编译生成的css代码如下：
antTest{
background-color: blue;
border: 4px solid #ccc;
border-radius: 8px;
}
这样的话，圆角尺寸就不是一个固定值，而是可以根据需要进行定制。再看一段scss代码实例：
@mixin setborder($color, $width) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p {
@include setborder(blue, 2px);
}
如果混合器没带参数，那么可以省略小括号；如果带有参数，必须带有小括号。参数与参数之间用逗号分隔。也可以给混合器的参数设置默认值，看如下scss代码代码实例:
@mixin setborder($color, $width: 2px) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p {
@include setborder(green);
}
h1 {
@include setborder(green, 4px);
}
上面的代码中，设置第二个参数$width默认值是2px，如果没有传递此参数，那么就直接使用默认值。如果传递了此参数，那么新的参数将会覆盖默认参数。传递参数也可以使用键值对的方式，scss代码实例如下:
@mixin setborder($color, $width) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
h1 {
@include setborder($color: green, $width: 4px);
}
参数变量（...）也可以在@include引用混合器的时候，将值列表中的值逐条作为参数引用：
@mixin colorlist($text, $background, $border) {
color: $text;
background-color: $background;
border-color: $border;
}
$values: #ccc, #0ff, #fff;
.orignal{
@include colorlist($values...);
}
最新文章
- 使用 SecurityManager 和 Policy File 管理 Java 程序的权限
- ASP.NET MVC 5 Web编程3 -- Controller的应用及扩展
- 几大主流浏览器内核（Rendering Engine）
- Daily Scrum Meeting ——ThirdDay
- HDU 5869 (离线+树状数组)
- ios 向工程里添加Fonts
- #error作用
- 利用JQ实现的，高仿 彩虹岛官网导航栏（学习HTML过程中的小记录）
- 如何说服你的老板必须使用APM？
- 安卓蓝牙技术Bluetooth使用流程（Bluetooth详解）
- javascript外部使用
- c语言基础学习03
- 使用K-means进行聚类，用calinski_harabaz_score评价聚类效果
- 解决定位工具报错Error while parsing UI hierarchy XML file: Invalid ui automator hierarchy file.
- java:@SuppressWarnings注解
- mysql编译安装（详细）
- UWP 五星评价（不跳转到龟速商店）
- ASP.NET Application Life Cycle
- HTML的各个标签的默认样式
- php将汉字转换为拼音和得到词语首字母(三)