Sass学习（二）--混合器与继承

@mixin testmix{
    list-style:none;
    li{
        color:red;
        padding:30px;
    }
    >.top{
        background:red
    }
}

ul.parent{
    border:1px solid red;
    @include testmix;
}
//编译后
ul.parent {
  border: 1px solid red;
  list-style: none; 
}
  ul.parent li {
    color: red;
    padding: 30px; 
}
  ul.parent > .top {
    background: red;
 }

可以看到Sass很智能的帮我们处理了一些较复杂的规则

混合器传参

混合器可以像函数一样传递参数混合器传参数

代码语言：javascript复制

@mixin test($color,$size,$hoverColor){
    color:$color;
    border:$size solid red;
    &:hover{
        color:$hoverColor
    }
}

#top{
    @include test(red,1px,blue);
}
//编译后
#top {
  color: red;
  border: 1px solid red; 
}
  #top:hover {
    color: blue; 
}

/*#

当然这里有个问题，混合器里面的参数不允许颠倒位置，如果你记不清他们什么位置可以使用键值的方式明确指定

代码语言：javascript复制

@mixin test($color,$size,$hoverColor){
    color:$color;
    border:$size solid red;
    &:hover{
        color:$hoverColor
    }
}

#top{
    @include test($size:1px,$hoverColor:blue,$color:red);
}
//编译后
#top {
  color: red;
  border: 1px solid red;
  }
#top:hover {
    color: blue;
  }

参数默认值

混合器允许你定义参数默认值如下

代码语言：javascript复制

@mixin test($normal,$hover:red){
    color:$normal;
    background-color:$hover
}
#top{
    @include test(skyblue,orange);
}
//编译后
#top {
  color: skyblue;
  background-color: orange;
  }
  //不指定color
@mixin test($normal,$hover:red){
    color:$normal;
    background-color:$hover
}
#top{
    @include test(skyblue);
}
//编译后
  
#top {
  color: skyblue;
  background-color: red; }

Sass继承

Sass中也可实现继承类似面向对象思想子类继承父类，sass可以继承多个父类这个”父类“可以是类，id 标签状态等。继承语法 @extend name 如

代码语言：javascript复制

.error{
    color:red;
    font-size:15px;
}
.danger-error{
    @extend .error;
    font-size:20px;
}
//编译后
.error, .danger-error {
  color: red;
  font-size: 15px;
}

.danger-error {
  font-size: 20px; 
}

当然父类也可包含css规则

代码语言：javascript复制

.error{
    color:red;
    font-size:15px;
    >.te{
        padding:10px
    }
}
.danger-error{
    @extend .error;
    font-size:20px;
}
//编译后
.error, .danger-error {
  color: red;
  font-size: 15px; 
}
.error > .te, .danger-error > .te {
    padding: 10px;
  }

.danger-error {
  font-size: 20px; 
 }

组合继承

代码语言：javascript复制

.error a{
    color:red;
    font-size:10px;
}
.danger{
    @extend .error;
    color:orange;
}
//编译后
.error a, .danger a {
  color: red;
  font-size: 10px; 
}

.danger {
  color: orange; 
}

继承多个

代码语言：javascript复制

.one{
    color:red;
}
.two{

    border:1px solid red;
}
.three{
    @extend .one;
    @extend .two;
    //或者这样写@extend .one,.two
    //
    background:blue;
}
//编译后
.one, .three {
  color: red; 
}
.two, .three {
  border: 1px solid red;
}
.three {
  background: blue;
}

继承局限性继承不支持组合很多选择器不支持继承如包选择器 .one tow 相邻选择器 .one .two

%继承有些时候我们希望被用来继承的代码不要渲染到页面上只作为继承使用。定义方法父类名前 %

代码语言：javascript复制

%test{
    border:1px solid red;
}
#main{
    @extend %test;
}
//编译后
#main {
  border: 1px solid red; 
}


#meng a%long{
    color:blue;
    border:1px solid red;
}

.notice{
    @extend %long;
}
//编译后
#meng a.notice {
  color: blue;
  border: 1px solid red; 
}

继承在指令的作用域如（@media）在指令内部无法继承到指令外部的类，指令外部继承指令内部的类无法达到预期效果

代码语言：javascript复制

.one{
    height:400px;
}

@media print{
    .two{
        @extend .one
    }
    width:300px;
}

编译时报错

继承注意事项

不能过量使用继承，因为所有类继承了父类，父类改变就会影响子类
继承只会在生成css时复制选择器，而不会复制大段的css属性如果不小心会让生成css中包含大量的选择器复制避免这种情况的最好办法：不要在继承css规则中使用后代选择器如

代码语言：javascript复制

 .dsf{}
 .foo .bar {
 @extend dsf //不推荐
 }

面向对象编程 css sass

0 人点赞

Sass学习（二）--混合器与继承

目录

混合器

Sass继承