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;

}
可以写成：