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.

<pre name="code" class="html">@mixin col(<span style="color:#3366ff;">$width</span>){
    width:<span style="color:#3366ff;">$width</span>;
}
.webpage{
    @include col(<span style="color:#3366ff;">50%</span>);
}

</pre>

也可添加默认参数：

@mixin col($width<span style="color:#ff0000;">:50%</span>){
    width:$width;
}
.webpage{
    @include <span style="color:#ff0000;">col()</span>;
}

@extend用法：

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

1.

<pre name="code" class="html">.error{
   color:red;
}
.serious-error{

<pre name="code" class="html">   color:red;

border:1px red;}

这种代码难以维护，一旦要修改要同时修改两个class的color属性，不推荐

2.

在html文件中：

....
<div class="error"></div>
<div class="error serious-error"></div>
....

同样不推荐，用多了会生成诡异bug

3.

.error,.serious-error{
   color:red;
}
.serious-error{
   border:1px red;
}

这种代码形式才是最利于维护的

为了在scss中实现这样的css代码，要利用@extend：

.error{
    color: red;
}
.serious-error{
   <span style="color:#ff0000;"> @extend .error;</span>
    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;
}

编译后

<pre name="code" class="html">#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;
}

编译会出错

<span style="font-family:Arial;">3.继承在指令中有作用域问题，无法使在指令如@media之外的选择器继承。</span>

<span style="font-family:Arial;"></span><pre name="code" class="html">.one {
	height:300px;
}
@media print {
  .two {
	@extend .one;
	width:300px;
  }
}

编译后会出错， 类名“.two”并没有继承类名“.one”的样式，那么需要让类名“.two”成功继承类名“.one”的样式，就应该把类名“.one”也放在@media中

<span style="font-family:Arial;"></span><pre name="code" class="html">@media print {
	.one {
		height:300px;
	}
	.two {
		@extend .one;
		width:300px;
	}
}

@media query

sass中的@media跟css的区别：sass中的@media可以内嵌在css规则中，在生成css时才会提到样式最高层，这样避免重复书写选择器

@mixin col-sm($width:50%