sass/scss语法@mixin

----------------------------题外话---------------------------------

css新增HSL颜色模式，h色调（360度圆盘），s饱和度（百分比），l亮度（百分比）

eg.  

 p{
	color:hsl(270,100%,100%);
}

sass支持hsl属性，如果直接在css中使用hsl属性，ie678不支持此属性，因此通过sass可以完美解决hsl浏览器兼容问题

----------------------------------正文----------------------------------------------------

可重用的代码块，称为mixin：

可通过@include，@extend调用

@include用法：

@mixin .page{//@mixin声明
     color:#f00;
}
.webpage{//@include调用
     @include page();
}

mixin在不调用的情况下是不会生成任何css样式的，调用的时候也只是输出到调用位置

可添加参数，eg.

@mixin col($width){
    width:$width;
}
.webpage{
    @include col(50%);
}
 
  
 
  

也可添加默认参数：

@mixin col($width:50%){
    width:$width;
}
.webpage{
    @include col();
}

@extend用法：

当我们要实现两个class，假设为.error和.serious-error，有一样的属性时，在html和css中有三种方法：

1.

.error{
   color:red;
}
.serious-error{
 
  
   color:red;
 border:1px red;} 
  
 
  
 
  
 这种代码难以维护，一旦要修改要同时修改两个class的color属性，不推荐 
  
 
  
2.
 
  
在html文件中：
 
  
 
  
....


....
同样不推荐，用多了会生成诡异bug 
  
3.
 
  
 
  
.error,.serious-error{
   color:red;
}
.serious-error{
   border:1px red;
}
这种代码形式才是最利于维护的 
  
为了在scss中实现这样的css代码，要利用@extend：
 
  
 
  
.error{
    color: red;
}
.serious-error{
    @extend .error;
    border: 1px solid red;
}
**@extend小结： 
  
   1.支持继承多个选择器：
 
  
 
  
...
@extend .error, .fault
...
   
  要继承的不仅仅是一个类名，可以是一个id也可以是一个元素，也可以是某个状态，任何选择器都能继承 
  
  连续继承：A继承B,C继承A
 
  
 
  
.one {
	width:100px;height:100px;
}
.two {
	/*继承的样式*/
	@extend .one;
	/*独立的样式*/
	background:red;
	border:5px solid #000;
}
.three {
	/*继承的样式*/
	@extend .two;
	/*独立的样式*/
	padding:10px;
}
编译后的css： 
  
 
  
.one, .two, .three {
  /*继承的样式*/
  width: 100px;
  height: 100px;
}

.two, .three {
  /*独立的样式*/
  background: red;
  border: 5px solid #000;
}

.three {
  /*独立的样式*/
  padding: 10px;
}
 
  
2.使用%构建只用来继承的选择器
 
  
有时候你想继承一个类名，但是并不想再在HTML中使用，就单单想写一个能够继承的类名。尤其是不想让它出现在css样式中。我们可以用占位符来写一些继承的样式(如“%one”)，然后再通过@extend继承，这样就可以防止被渲染到CSS的规则集中。
 
  
 
  
#meng a%long {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

.notice {
  @extend %long;
}
编译后 
  
 
  
#meng a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
 
  
 
  
 
  
 
  
 
  
 ***局限性： 
  
1.当继承的class中包含如hover的状态时，会一并继承hover的状态：
 
  
 
  
.myLink {
  @extend a;
}
a {
  color: blue;
  &:hover {
    text-decoration: underline;
  }
}
编译后 
  
 
  
a, .myLink {
  color: blue;
}
a:hover, .myLink:hover {
  text-decoration: underline;
}
2.不能继承选择器序列 
  
 
  
.meng .B {
	font-weight:bold;
}

.long .link {
	@extend .meng .B;
}
编译会出错 
  
 
  
3.继承在指令中有作用域问题，无法使在指令如@media之外的选择器继承。
 
  
.one {
	height:300px;
}
@media print {
  .two {
	@extend .one;
	width:300px;
  }
}
编译后会出错， 
  类名“.two”并没有继承类名“.one”的样式，那么需要让类名“.two”成功继承类名“.one”的样式，就应该把类名“.one”也放在@media中 
  
 
  
@media print {
	.one {
		height:300px;
	}
	.two {
		@extend .one;
		width:300px;
	}
}
 
  
 
  
 
  
 
  
 
  
 
  
 @media query 
  
 
  
sass中的@media跟css的区别：sass中的@media可以内嵌在css规则中，在生成css时才会提到样式最高层，这样避免重复书写选择器
 
  

 
  
@mixin col-sm($width:50%