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

目录

• 混合器
• 继承

混合器

Sass中的混合器类似于js的函数，将一段代码定义成混合器以实现代码的重用
声明混合器：@mixin mixName
调用混合器 @include minName
如

@mixin border-round{
	-moz-border:1px solid red;
	-webkit-border:1px solid red;
	border:1px solid red
}
#top{
	@include border-round;
}
//编译后
#top {
  -moz-border: 1px solid red;
  -webkit-border: 1px solid red;
  border: 1px solid red; }

混合器css规则
当然混合器中也可以包含css规则

@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很智能的帮我们处理了一些较复杂的规则

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

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

/*# 

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

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

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

@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
如

.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规则

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

组合继承

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

.danger {
  color: orange; 
}

继承多个

.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

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

%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）
在指令内部无法继承到指令外部的类，指令外部继承指令内部的类无法达到预期效果

.one{
	height:400px;
}

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

编译时报错

继承注意事项

1. 不能过量使用继承，因为所有类继承了父类，父类改变就会影响子类

2. 继承只会在生成css时复制选择器，而不会复制大段的css属性
   如果不小心会让生成css中包含大量的选择器复制
   避免这种情况的最好办法：
   不要在继承css规则中使用后代选择器如

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