Sass混合器、继承(0725)

混合器     

Sass中的混合器类似于js的函数，将一段代码定义成混合器以实现代码的重用。

声明混合器：@mixin mixName
调用混合器 @include minName

混合器分为:无参 有参 有默认值

无参:

/*无参*/

@mixin name {
    font-size: 20px;
    font-weight: bold;
}

.p1 {
    color: red;
    @include name;
}

.p2 {
    color: yellowgreen;
    @include name;
}

编译后

/*无参*/
.p1 {
  color: red;
  font-size: 20px;
  font-weight: bold;
}

.p2 {
  color: yellowgreen;
  font-size: 20px;
  font-weight: bold;
}

有参:

/*有参*/

@mixin name2($a1, $a2, $a3, $a4, $a5) {
    width: $a1;
    height: $a2;
    background-color: $a3;
    border: $a4 solid $a5;
}

.div11 {
    @include name2(40px, 40px, pink, 2px, yellowgreen);
}

.div12 {
    @include name2(50px, 50px, red, 5px, yellowgreen);
}


编译后

/*有参*/
.div11 {
  width: 40px;
  height: 40px;
  background-color: pink;
  border: 2px solid yellowgreen;
}

.div12 {
  width: 50px;
  height: 50px;
  background-color: red;
  border: 5px solid yellowgreen;
}

有默认值:

/*有默认值*/

@mixin name3($a1, $a2, $a3, $a4:$a1) {
    width: $a1;
    height: $a2;
    background-color: $a3;
    font-size: $a4;
}

.div21 {
    @include name3(60px, 60px, red);
}


编译后


/*有默认值*/
.div21 {
  width: 60px;
  height: 60px;
  background-color: red;
  font-size: 60px;
}

继承

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

/*继承 %占位符(不会被编译例:%jc)*/

.jc {
    width: 100px;
    height: 100px;
}

.div3 {
    display: flex;
}

.div31 {
    @extend .jc;
    background-color: aqua;
    border: 5px solid fuchsia;
}

.div32 {
    @extend .jc;
    background-color: seagreen;
    border: 5px solid saddlebrown;
}



编译后



/*继承 %占位符(不会被编译例:%jc)*/
.jc, .div32, .div31 {
  width: 100px;
  height: 100px;
}

.div3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.div31 {
  background-color: aqua;
  border: 5px solid fuchsia;
}

.div32 {
  background-color: seagreen;
  border: 5px solid saddlebrown;
}

多个继承:

.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;
}