Sass 基本特性 基础

(1)声明变量

$ 300px;

$		变量声明符， 
width	变量名称， 
300px	变量值.

-------------------------------------------------------------------------------------------------------------------

(2)普通变量与默认变量
$fontSize: 12px;
body {
	font-size:$fontSize;
}

默认变量
sass的默认变量仅需要在值后面加上!default即可。
$baseLineHeight: 24px !default;

body {
	line-height:$baseLineHeight;
}

编译后的css代码：
body {
	line-height:24px;
}

sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，
覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。

$baseLineHeight: 2;　　　　//覆盖默认变量
$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight; 
}
//css
body{
    line-height:2;
}

--------------------------------------------------------------------------------------------------------------------------

（3）变量的调用

在Sass中声明变量以后，就可以在需要的地方调用。
调用方法也很简单。

----------------------------------------------------------------------------------------------------------------------------

（4）全局变量和局部变量

在选择器，函数，混合宏。。。的外面定义的变量为全局变量。

$color:orange !default;	//定义全局变量
.blick {
	color:$color;		//调用全局变量
}
em {
	$color:red;		　　//定义局部变量
	a {
		color:$color;	　　//调用局部变量
	}
}
span {
	color: $color;　　　　//调用全局变量
}

//CSS
.block {
  color: orange;
}
em a {
  color: red;
}
span {
  color: orange;
}

什么时候声明变量？
我的建议，创建变量只适用于感觉确有必要的情况下。不要为了某些骇客行为而声明新变量，这丝毫没有作用。
只有满足所有下述标准时方可创建新变量：

	(a)该值至少重复出现了两次；
	(b)该值至少可能会被更新一次；
	(c)该值所有的表现都与变量有关（非巧合）。

------------------------------------------------------------------------------------------------------------------------

（5）嵌套-选择器嵌套
Sass嵌套分为三种：
	（a）选择器嵌套
	（b）属性嵌套
	（c）伪类嵌套

<header>
	<nav>
		<a href="##">Home</a>
		<a href="##">Abput</a>
		<a href="##">Blog</a>
	</nav>
</header>

nav {
	a {
		color:red;
		
		header & {
			color:green;
		}
	}
}

//css
nav a { 
	color:red;
}

header nav a {
	color: green;
}

注意： 这里有一个语法问题。
nav {
  p {
    color: red;
    
    a {
        header & {
          color:green;
        }
    }
  }  
}

	这里的这个&。这个符号，代表了从开始到此节点的包含顺序，并且追加到 & 前的元素的后面。
意思就是：header & --->> header nav a.

---------------------------------------------------------------------------------------------------------------

（6）嵌套-属性嵌套

Sass 中还提供属性嵌套，CSS 有一些属性前缀相同，只是后缀不一样，
比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性。
假设你的样式中用到了：

.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

在Sass中我们可以这样写：
.box {
	border: {
		top:1px; solid red;
		bottom: 1px solid green;
	}
}
//css
.box {
  border-top: 1px solid red;
  border-bottom: 1px solid green;
}

注意：语法股则。 
border: {
	top:1px; solid red;
}
属性嵌套。
形式如这种 A:{B:{C:XXX;}} ---》》》  A-B-C:XXX;

-----------------------------------------------------------------------------------------------

（7）嵌套-伪类嵌套
其实伪类嵌套和属性嵌套很相似，只不过他需要借助 & 符号一起配合使用。

.clearfix{
      &:before,
      &:after {
           content:"";
           display: table;
       }
      &:after {
          clear:both;
          overflow: hidden;
      }
}

//css
clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
    overflow: hidden;
}

平时尽量避免使用选择器嵌套

------------------------------------------------------------------------------------------------------------------

（8）混合宏-声明混合宏

（a）声明混合宏：
	@mixin border-radius {
		-webkit-border-radius: 5px;
		border-radius:5px;
	}

其中 @mixin 是用来声明混合宏的关键词，有点类似 CSS 中的 @media、@font-face 一样。
border-radius 是混合宏的名称。大括号里面是复用的样式代码。

（b）带参数混合宏：
除了声明一个不带参数的混合宏之外，还可以在定义混合宏时带有参数，如：
	@mixin border-radius($radius:5px) {
		-webkit-border-radius: $radius;
		border-radius: $radius;
	}


（c）复杂的混合宏：
上面是一个简单的定义混合宏的方法，当然， Sass 中的混合宏还提供更为复杂的，
你可以在大括号里面写上带有逻辑关系，帮助更好的做你想做的事情,如：
	@mixin box-shadow($shadow...) {　　//如果这里参数超过一个，就可以用...来代替
	  @if length($shadow) >= 1 {
		@include prefixer(box-shadow, $shadow);
	  } 
          @else{
		$shadow:0 0 4px rgba(0,0,0,.3);
		@include prefixer(box-shadow, $shadow);
	  }
	}
这个 box-shadow 的混合宏，带有多个参数，这个时候可以使用“ … ”来替代。简单的解释一下，
当 $shadow 的参数数量值大于或等于“ 1 ”时，表示有多个阴影值，
反之调用默认的参数值“ 0 0 4px rgba(0,0,0,.3) ”。

-------------------------------------------------------------------------------------------------------------------------------------


（9）混合宏-调用混合宏

在Sass中通过@mixin关键词声明了一个混合宏，那么在实际的调用中，其匹配了一个关键词 “@include” 来调用声明好的混合宏，
例如在你的样式中定义了圆角的混合宏 “border-radius”；

	@mixin border-radius{
		-webkit-border-radius: 3px;
		border-radius: 3px;
	}

在一个按钮中要调用定义好的混合宏“border-radius”，可以这样使用：
	button {
		@include border-radius;
	}

-------------------------------------------------------------------------------------------------------------------------------------
	
（10）混合宏的参数--传一个带值的参数

在 Sass 的混合宏中，还可以给混合宏的参数传一个默认值，例如：

@mixin border-radius($radius:3px){
	-webkit-border-radius: $radius;
	border-radius: $radius;
}

.btn {
	@include border-radius;
}

//编译出来的 CSS:
.btn {
       -webkit-border-radius: 3px;
       border-radius: 3px;
}

但有的时候，页面中有些元素的圆角值不一样，那么可以随机给混合宏传值，如：
.box {
     @include border-radius(50%);
}

编译出来的 CSS:
.box {
      -webkit-border-radius: 50%;
      border-radius: 50%;
}

------------------------------------------------------------------------------------------------------------------------

（11）混合宏的参数--传多个参数

Sass 混合宏除了能传一个参数之外，还可以传多个参数，如：

@mixin center($width, $height) {
	$width;
	height:$height;
	position:absolute;
	top: 50%;
	left: 50%;
	margin-top: -($height) / 2;
	margin-left: -($width) / 2;
}

----------------------------------------------------------------------------------------------------------------------------

（12）混合宏的参数--传多个参数

在混合宏“center”就传了多个参数。在实际调用和其调用其他混合宏是一样的：
.box-center {
      @include center(500px, 300px);
}

编译出来 CSS:
.box-center {
   500px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -250px;
}

有一个特别的参数“…”。当混合宏传的参数过多之时，可以使用参数来替代，如：
@mixin box-shadow($shadows...) {
     @if length($shadows) >= 1 {
           -webkit-box-shadow: $shadows;
           box-shadow: $shadows;
     } 
    @else {
           $shadows: 0 0 2px rgba(#000,0.25);
            -webkit-box-shadow: $shadow;
            box-shadow: $shadow;
     }
}


实际调用
.box {
      @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}
编译出来的CSS:
.box {
      -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
}

----------------------------------------------------------------------------------------------------------

（13）混合宏的参数--混合宏的不足

混合宏在实际编码中给我们带来很多方便之处，特别是对于复用重复代码块。
但其最大的不足之处是会生成冗余的代码块。比如在不同的地方调用一个相同的混合宏时。
如：
@mixin border-radius{
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.box {
    @include border-radius;
    margin-bottom: 5px;
}

.btn {
    @include border-radius;
}
示例在“.box”和“.btn”中都调用了定义好的“border-radius”混合宏。先来看编译出来的 CSS：
.box {
    -webkit-border-radius: 3px;
    border-radius: 3px;
    margin-bottom: 5px;
}

.btn {
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
上例明显可以看出，Sass 在调用相同的混合宏时，并不能智能的将相同的样式代码块合并在一起。
这也是 Sass 的混合宏最不足之处。

----------------------------------------------------------------------------------------------------------------------

（14）扩展/继承
在 Sass 中也具有继承一说，也是继承类中的样式代码块。
在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。如下所示：

//scss
.btn {
	border:1px solid #ccc;
	padding:6px 10px;
	font-size: 14px;
}

.btn-primary {
	background-color:#f36;
	color: #fff;
	@extend .btn;	//继承了btn的属性
}

.btn-second {
	background-color:orange;
	color:#fff;
	@extend .btn;
}

编译出来之后：
.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;
}
	
---------------------------------------------------------------------------------------------------------

（15）占位符 %placeholder （很重要的一个性质）

Sass 中的占位符 %placeholder 功能是一个很强大，很实用的一个功能，
这也是我非常喜欢的功能。他可以取代以前 CSS 中的基类造成的代码冗余的情形。
因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。来看一个演示：

	%mt5 {
	     margin-top: 5px;
	}
	%pt5{
	    padding-top: 5px;
	}
这段代码没有被 @extend 调用，他并没有产生任何代码块，
只是静静的躺在你的某个 SCSS 文件中。只有通过 @extend 调用才会产生代码：

//SCSS
	%mt5 {
	    margin-top: 5px;
	}
	%pt5{
	    padding-top: 5px;
	}

	.btn {
	    @extend %mt5;
	    @extend %pt5;
	}

	.block {
	    @extend %mt5;

	    span {
		  @extend %pt5;
	    }
	}

//编译出来的CSS

	.btn, .block {
	  margin-top: 5px;
	}

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


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

　　　　　　　　　　　　　　　　　　　　　　（16）混合宏 VS 继承 VS 占位符

初学者都常常纠结于这个问题“什么时候用混合宏，什么时候用继承，什么时候使用占位符？”其实他们各有各的优点与缺点，先来看看他们使用效果：

a) Sass 中的混合宏使用

例子（a） 
//sass
@mixin mt($var){
　　margin-top: $var;  
}

.block {
　　@include mt(5px);
  　 span {
       　 display:block;
    　　@include mt(5px);
  　}
}

.header {
 　　color: orange;
 　　@include mt(5px);
 　　span{
       　　display:block;
       　　@include mt(5px);
  　　}
}

//css

.block {
　　margin-top: 5px;
}
.block span {
　　display: block;
　　margin-top: 5px;
}

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

/*# sourceMappingURL=hg.css.map */


总结：编译出来的 CSS 清晰告诉了大家，他不会自动合并相同的样式代码，
如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余，
这也是 CSSer 无法忍受的一件事情。不过他并不是一无事处，他可以传参数。

建议：如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。

b) Sass 中继承

同样的，将上面代码中的混合宏，使用类名来表示，然后通过继承来调用：

例子（b）
//sass
.mt{
　　 margin-top: 5px;  
}

.block {
　　@extend .mt;

　　span {
　　　　display:block;
  　　　 @extend .mt;
  　}
}

.header {
  　　color: orange;
  　　@extend .mt;

 　　 span{
   　　　　 display:block;
   　　　　 @extend .mt;
  　　}
}

//输出的css
.mt, .block, .block span, .header, .header span {
  margin-top: 5px;
}

.block span {
  display: block;
}

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



总结：使用继承后，编译出来的 CSS 会将使用继承的代码块合并到一起，通过组合选择器的方式向大家展现，
比如 .mt, .block, .block span, .header, .header span。这样编译出来的代码相对于混合宏来说要干净的多，
也是 CSSer 期望看到。但是他不能传变量参数。

个人建议：如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承。

c) 占位符

最后来看占位符，将上面代码中的基类 .mt 换成 Sass 的占位符格式：

例子（c）
%mt{
　　margin-top: 5px;  
}

.block {
  　　@extend %mt;

 　　 span {
    　　　　display:block;
    　　　　@extend %mt;
  　　}
}

.header {
  　　color: orange;
  　　@extend %mt;

 　　 span{
  　　　　  display:block;
   　　　　 @extend %mt;
  　　}
}

//输出的css
.block, .block span, .header, .header span {
  margin-top: 5px;
}

.block span {
  display: block;
}

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


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

使用 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;
}
	

这是 Sass 插值中一个简单的实例。当你想设置属性值的时候你可以使用字符串插入进来。
另一个有用的用法是构建一个选择器。可以这样使用：

	@mixin generate-sizes($class, $small, $medium, $big) {
		.#{$class}-small { font-size: $small; }
		.#{$class}-medium { font-size: $medium; }
		.#{$class}-big { font-size: $big; }
	}
	@include generate-sizes("header-text", 12px, 20px, 40px);

//编译出来的 CSS:

	.header-text-small { font-size: 12px; }
	.header-text-medium { font-size: 20px; }
	.header-text-big { font-size: 40px; }
		
	
（18）注释
注释对于一名程序员来说，是极其重要，良好的注释能帮助自己或者别人阅读源码。
在 Sass 中注释有两种方式，我暂且将其命名为：

1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ”
2、类似 JavaScript 的注释方式，使用“//”

两者区别，前者会在编译出来的 CSS 显示，后者在编译出来的 CSS 中不会显示，来看一个示例：

有中文注释，一定要保存为utf-8.格式。

%mt5 {
  margin-top: 5px;
}

/*调用一个占位符*/

.box {
  @extend %mt5;
}

编译出来的CSS

@charset "UTF-8";
.box {
  margin-top: 5px;
}

/*调用一个占位符*/
	
------------------------------------------------------------------------------------------------------------

（19）数据类型
 Sass 和 JavaScript 语言类似，也具有自己的数据类型，在 Sass 中包含以下几种数据类型：

 数字: 如，1、 2、 13、 10px；
 字符串：有引号字符串或无引号字符串，如，"foo"、 'bar'、 baz；
 颜色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；
 布尔型：如，true、 false；
 空值：如，null；
 值列表：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。

SassScript 也支持其他 CSS 属性值（property value），
比如 Unicode 范围，或 !important 声明。
然而，Sass 不会特殊对待这些属性值，一律视为无引号字符串 (unquoted strings)。


（20）字符串
SassScript 支持 CSS 的两种字符串类型：

有引号字符串 (quoted strings)，如 "Lucida Grande" 、'http://sass-lang.com'；
无引号字符串 (unquoted strings)，如 sans-serifbold。
在编译 CSS 文件时不会改变其类型。只有一种情况例外，使用 #{ }插值语句 (interpolation) 时，
有引号字符串将被编译为无引号字符串，这样方便了在混合指令 (mixin) 中引用选择器名。

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}
@include firefox-message(".header");


编译为：

body.firefox .header:before {
  content: "Hi, Firefox users!"; }
需要注意的是：当 deprecated = property syntax 时 （暂时不理解是怎样的情况），
所有的字符串都将被编译为无引号字符串，不论是否使用了引号。
	

--------------------------------------------------------------------------------------------------------

（21）值列表
所谓值列表 (lists) 是指 Sass 如何处理 CSS 中： 

margin: 10px 15px 0 0
或者： 

font-face: Helvetica, Arial, sans-serif
像上面这样通过空格或者逗号分隔的一系列的值。

事实上，独立的值也被视为值列表——只包含一个值的值列表。

Sass列表函数（Sass list functions）赋予了值列表更多功能（Sass进级会有讲解）：

nth函数（nth function） 可以直接访问值列表中的某一项；
join函数（join function） 可以将多个值列表连结在一起；
append函数（append function） 可以在值列表中添加值； 
@each规则（@each rule） 则能够给值列表中的每个项目添加样式。
值列表中可以再包含值列表，比如 1px 2px, 5px 6px 是包含 1px 2px 与 5px 6px 两个值列表的值列表。
如果内外两层值列表使用相同的分隔方式，要用圆括号包裹内层，
所以也可以写成 (1px 2px) (5px 6px)。当值列表被编译为 CSS 时，Sass 不会添加任何圆括号，
因为 CSS 不允许这样做。(1px 2px) (5px 6px)与 1px 2px 5px 6px 在编译后的 CSS 文件中是一样的，
但是它们在 Sass 文件中却有不同的意义，前者是包含两个值列表的值列表，而后者是包含四个值的值列表。

可以用 () 表示空的列表，这样不可以直接编译成 CSS，比如编译 font-family: ()时，Sass 将会报错。
如果值列表中包含空的值列表或空值，编译时将清除空值，比如 1px 2px () 3px 或 1px 2px null 3px。
	
	
	
	
	整理自mooc