Sass混合器和选择器的继承

最新推荐文章于 2024-10-12 10:37:34 发布

执笔丶画苍生

最新推荐文章于 2024-10-12 10:37:34 发布

阅读量177

点赞数 2

文章标签： sass css 前端

本文链接：https://blog.csdn.net/m0_63716324/article/details/125978204

版权

本文介绍了如何在Sass中使用混合器（mixin）定义可复用的样式，避免无意义的class。内容包括混合器的定义、使用方法、参数应用以及选择器继承。通过实例演示了如何定义和引用混合器，以及如何利用参数和关键词参数创建多样化的样式。

摘要由CSDN通过智能技术生成

· Sass混合器（mixin）用于定义可重复的样式，为了避免使用无语义的Class。Sass混合器可以包含所有的CSS规则，绝大部分Sass规则，甚至通过引入参数变量，输出多样化的样式。

1、定义混合器

混合器的用法是在@mixin后添加名称和样式

@mixin name {
    text-decoration: none;
    font-family: "楷体";
    font-size: 20px;
}

混合器也需要包含选择器和属性，甚至可以用 &引用父选择器

@mixin name{
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
}

2、引用混合器

使用 @include 指令引用混合样式，格式是在其后添加混合名称，以及需要的参数：

@mixin a_1 {
    text-decoration: none;
    font-family: "楷体";
    font-size: 20px;
}

.nav {
    // 使用@include调用函数
    @include a_1();
}

编译后

.nav {
  text-decoration: none;
  font-family: "楷体";
  font-size: 20px;
}

也可以在最外层引用混合样式，不会直接定义属性，也不可以使用父选择器

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}
@include silly-links;

编译后

a {
  color: blue;
  background-color: red; }

3、参数

参数用于给混合指令中的样式设定变量，并且赋值使用。在定义混合指令的时候，按照变量的格式，通过逗号分隔，将参数写进圆括号里。引用指令时，按照参数的顺序，再将所赋的值对应写进括号：

@mixin name($color, $background-color) {
    color: $color;
    background-color: $background-color;
}

 p {
        @include name(green, #0ff);
    }

编译后

p {
  color: green;
  background-color: #0ff;
}

3.1、关键词参数

混合器也可以使用关键词参数，比如上面的例子也可以写成

p { @include sexy-border($color: blue); }

关键词参数可以打乱顺序使用，如果使用默认值也可以省缺，另外，参数名被视为变量名，下划线、短横线可以互换使用。

3.2、参数变量

不能确定混合指令需要使用多少个参数，比如一个关于 box-shadow 的混合指令不能确定有多少个 'shadow' 会被用到，可以使用参数变量 … 声明，告诉 Sass 将这些参数视为值列表处理：

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

编译后

.shadowed {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

4、选择器的继承

通过@extend标识来实现

// 通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}