Sass 基础(三)

扩展/继承 　　　　继承对于了解css 的同学来说一点都不陌生，先来看一张图 　　　　在Sass 中也具有继承一说，也就是继承类中的样式代码块，在Sass中时通过关键词“@extend”来 　　　　继承已经存在的类样式块，从而实现代码的继承。

	　　//SCSS
	    　　　　　　.btn{
		　　　　　　　　　　border:1px solid #ccc;
		　　　　　　　　　　padding:6px 10px;
		　　　　　　　　　　font-size:14px;
	    　　　　　　}
	   　　　　.btn-primarg{
		　　　　　　　　background-color:#f36;
		　　　　　　　　color:#fff;
		　　　　　　　　@extend .btn;
                    　　　　　　}
	    　　　　.btn-second{
		　　　　　　　　background-color:organge;
		　　　　　　　　color:#fff;
		　　　　　　　　@extend .btn;
	   　　　　　　}

　　编译出来之后：

	　　　　//css
	　　　　　　.btn, .btn-primary, .btn-second {
		　　　　　　　　　　　　　　　　　　border:1px solid #ccc;
		　　　　　　　　　　　　　　　　　　padding:6px 10px;
		　　　　　　　　　　　　　　　　　　font-size:14px;
	　　　　　　　　　　　　　　}
	　　　　　　.btn-primary{
		　　　　　　　　　　　　background-color:#f36;
		　　　　　　　　　　　　color:#fff;
	　　　　　　　　　　}
	　　　　　　.btn-second{
		　　　　　　　　　　background-color:orange;
		　　　　　　　　　　color:#fff;
	　　　　　　　　}

　在 Sass 中的继承，可以继承类样式块中所有样式代码，而且编译出来的 CSS 会将选择器合并在一起，形成组合选择器：

	　　　　　　　　.btn, .btn-primary, .btn-second {
  			　　　　　　　　　　　　　　　　　　　　　　border: 1px solid #ccc;
  			　　　　　　　　　　　　　　　　　　　　　　padding: 6px 10px;
  			　　　　　　　　　　　　　　　　　　　　　　font-size: 14px;
	　　　　　　　　}

占位符%placeholder 　　　　　Sass中的占位符%placeholder 功能是一个很强大，很实用的一个功能，可以取代以前的css中的基类造成的 　　　　　代码冗余的情形，因为%placeholder 声明的代码，如果不被@extend 调用的话，不会产生任何代码。

	　　　　　　　　%mt5{
		　　　　　　　　　　　　margin-top:5px;
	　　　　　　　　　　}
	　　　　　　　　%pt5{
		　　　　　　　　　　　　padding-top：5px；
	　　　　　　　　　　}
	　　　　　　　　.btn{
		　　　　　　　　　　　　@extend %mt5;
		　　　　　　　　　　　　@extend %pt5;
	　　　　　　　　}
	　　　　　　　　.block{
		　　　　　　　　　　　　@extend %mt5;
		　　　　　　　　　　span{
			　　　　　　　　　　　　@extend %pt5;
		　　　　　　　　　　　　　　}
	　　　　　　　　}

　　　　　　编译出来的css

	　　　　　　　　　//css
	　　　　　　　　.btn, .block{
		　　　　　　　　　　　　　　margin-top:5px;
	　　　　　　　　　　}
	　　　　　　　　.btn, .block span{
		　　　　　　　　　　　　　　padding-top:5px;
	　　　　　　　　}

　　　　通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。这也是我们希望看到的效果，也让你的代码变得更为干净。 混合

　　　　混合宏vs继承vs占位符 a Sass中的混合宏使用

		　　　　　　//SCSS中混合宏使用
		　　　　　　@mixin mt($var){
			　　　　　　　　　　　　　　margin-top:$var;
		　　　　　　　　　　　　}
		　　　　　　.block{
		      　　　　　　　　　　@include mt(5px);
		       　　　　　　　　　　span{ 
			　　　　　　　　　　　　display:block;
			　　　　　　　　　　　　@include mt(5px);
		    　　　　　　　　　　}
		　　　　　　　　}
		　　　　　　.header{
			　　　　　　　　　　color:orange;
			　　　　　　　　　　@include mt(5px);
			　　　　　　　　　　span{
			   　　　　　　　　　　　　dispay:block;
			    　　　　　　　　　　　　@include mt(5px);
			　　　　　　　　　　　　}
		　　　　　　　　}

　　　　　　编译结果：

			　　　　　　　　.block span {
				　　　　　　　　　　　　display: block; 
　　　　　　　　　　　　}
			　　　　　　　　.header {
				　　　　　　　　　　　　color: orange; 
　　　　　　　　　　　　}
			　　　　　　　　.header span {
				 　　　　　　　　　　　　display: block; 
　　　　　　　　　　}
			　　　　　　　　.block, .block span, .header, .header span {
				　　　　　　　　　　　　　　margin-top: 5px;
 　　　　　　　　　　}

　　　　建议：如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。 b)Sass中继承 　　　　同样的，将上面代码中的混合宏，使用类名来表示，然后通过继承来调用。

		　　　　　　　　　　.mt{
			　　　　　　　　　　　　　　margin-top:5px;
		　　　　　　　　　　　　}
		　　　　　　　　　　.block {
			　　　　　　　　　　　　　　@extend .mt;
			　　　　　　　　　　　　span{
				　　　　　　　　　　　　　　　　display:block;
				　　　　　　　　　　　　　　　　@extend .mt;
			　　　　　　　　　　　　　　}
		　　　　　　　　　　　　}
		　　　　　　　　　　.header{
			　　　　　　　　　　　　　　color:orange;
			　　　　　　　　　　　　　　@extend .mt;
		　　　　　　　　　　}

　　　　　编译结果：

			　　　　　　　　.block span {
				　　　　　　　　　　　　display: block; 
　　　　　　　　　　}
			　　　　　　.header {
				 　　　　　　　　　　color: orange; 
　　　　　　　　　　}
			 　　　　　　.header span {
				 　　　　　　　　　　display: block; 
　　　　　　　　　　}
			　　　　　　.block, .block span, .header, .header span {
				　　　　　　　　margin-top: 5px; 
　　　　　　　　　　}

　　　　建议:如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用Sass的继承。 　　c)占位符 　　　　　　最后来看占位符，将上面的代码中的基类.mt 换成Sass的占位符格式

			　　　　//SCSS中占位符的使用
			　　　　　　%mt{
				　　　　　　　　margin-top:5px;
			　　　　　　}
			　　　　　　.block{
				　　　　　　　　@extend %mt;
				　　　　　　　　span{
					　　　　　　　　　　display:block;
					　　　　　　　　　　@extend %mt;
				　　　　　　　　　　}
			　　　　　　　　}
			　　　　　　.header{
				　　　　　　　　color:orange;
				　　　　　　　　@extend %mt;
				　　　　　　　　span{
					　　　　　　　　　　display:block;
					　　　　　　　　　　@extend %mt;
				　　　　　　　　}
			　　　　　　　　}

　　　　编译结果：

				　　　　　　.block span {
  					　　　　　　　　display: block; 
　　　　　　　　}
				　　　　　　.header {
  					　　　　　　　　color: orange;
　　　　　　　　 }
  				　　　　　　.header span {
    					　　　　　　　　display: block; 
　　　　　　　　}

　　　　编译出来的 CSS 代码和使用继承基本上是相同，只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的，“占位符是独立定义， 　　　　不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。”

　差值#{} 　　　　使用css 预处理器语言的一个主要原因是想使用Sass 获得一个更好的结构体系，比如说你想写更干净的，搞笑的和面向对象的 　　　　css. Sass 中的差值（Interpolation）就是重要的一部分，让我们看一下下面的例子。

		　　　　　　$properties:(margin ,padding);
		　　　　　　@mixin set-value($side,$value){
			　　　　　　@each $prop in $properties{
				　　　　　　　　#{$prop}-#{$side}:$value;
			　　　　　　　　　　}
		　　　　　　　　}
		　　　　　　.login-box{ 
			　　　　　　　　@include set-value(top,14px);
		　　　　　　　　}

　　　　　　代码编译成css

			　　　　　　.login-box{
				　　　　　　　　　　margin-top:14px;
				　　　　　　　　　　padding-top:14px;
			　　　　　　}

　　　　当你想设置属性值的时候你可以使用字符串插入进来，另一个使用的用法是构建一个选择器。

	　　　　@mixin generate-sizes($class,$small,$medium,$big)