Sass 互动版

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

混合声明和调用

sass中使用@mixin声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值。

声明的@mixin通过@include来调用。

在 Sass 中,使用“@mixin”来声明一个混合宏。如:

 @mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

其中 @mixin 是用来声明混合宏的关键词,有点类似 CSS 中的 @media@font-face 一样。border-radius 是混合宏的名称。大括号里面是复用的样式代码。

在一个按钮中要调用定义好的混合宏“border-radius”,可以这样使用:

button {
    @include border-radius;
}

这个时候编译出来的 CSS:

button {
  -webkit-border-radius: 5px;
  border-radius: 5px;
}