Sass 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

有参数mixin

在 Sass 的混合宏中,还可以给混合宏的参数传一个默认值,例如:

 @mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}

在混合宏“opacity”传了一个参数“$opacity”,而且给这个参数赋予了一个默认值“50”。

在调用类似这样的混合宏时,假设你的页面中的圆角很多地方都是需要的,那么这个时候只需要调用默认的混合宏“opacity”:

.opacity{
  @include opacity; //参数使用默认值
}

编译出来的 CSS:

.opacity{
  opacity: 50 / 100;
  filter: alpha(opacity=50);
}

那么可以随机给混合宏传值,如:

.opacity-80{
  @include opacity(80); //传递参数
}

编译出来的 CSS:

.opacity-80{
  opacity: 80 / 100;
  filter: alpha(opacity=80);
}
请用Sass语法编译,最终编译CSS是这样的 .btn { -webkit-border-radius: 3px; border-radius: 3px; }把一个按钮设置成3px圆角。