sass中的混合与继承

sass中的混合与继承

混合能使我们重用一整段sass代码，同时也可以给其传递参数。

定义一个混合，需用到@mixin关键字，后面跟自己定义的名字，若需要传参，则在名字之后加一对单括号()，同时在里面定义参数变量。通过调用@include关键字，来调用这段混合。

例如：

 @mixinborder-radius($amount:5px){
               -moz-border-radius:$amount;
               -webkit-border-radius:$amount;
               border-radius:$amount;
}
 h1{
               // 若传入参数，则传入参数会覆盖混合部分初始参数
          @include border-radius(2px);
 }
 .speaker{
            // 若不传入参数，则默认初始值
           @include border-radius；
 }

经过编译之后生成如下css样式：

 h1{
     border-radius:2px;
 }
 .speaker{
     border-radius:5px;
 }

选择器继承

选择器继承，能够让你实现选择器可以继承其他选择器中的所有样式，实现它需要使用@extend关键字，后面跟想要继承的选择器。

 例如：

 h2{
     border:4px solid#ff9aa9;
 }
 .speaker{
     @extend h2;
     border-width:2px;
 }

经过编译之后生成的css样式为：

 h2,.speaker{
     border:4px solid#ff9aa9;
 }
 .speaker{
     border-width:2px;
 }

嵌套：

Sass允许选择器嵌套，如：

div h1{
  color:red;
}

可以写成：