Sass详解

1、什么是Sass?

Sass（英文全称：Syntactically Awesome Stylesheets）是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。在开发最初版本之后，Weizenbaum和Chris Eppstein继续通过SassScript来继续扩充Sass的功能。SassScript是一个在Sass文件中使用的小型脚本语言。

2、CSS制作框架

Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码，易于组织和维护。

3、Sass语法

3.1、变量

Sass支持定义变量。变量以美元符号（$）作为开头。变量用冒号（:）赋值。
SassScript支持四种数据类型：

• 数值（可包括单位）
• 字符串
• 颜色
• 布尔类型
  变量可以用作函数的参数或返回值。在解释过程中，解释器会把变量的值写入最终的CSS文件中。
  SCSS语法的变量示例：

$blue: #3bbfce;
$margin: 16px;
.content-navigation { 
 border-color: $blue; 
  color: darken($blue, 10%);
  }
  .border { 
    padding: $margin / 2; 
    margin: $margin / 2;
    border-color: $blue;
   }

3.2、嵌套

3.2.1 1. 选择器嵌套

CSS虽然支持嵌套但是不支持代码块的嵌套，而SCSS支持。这样可更加清晰地表示元素之间的关系。

语法：

爷爷 {
	爸爸 {
		儿子 {
			孙子 {
			
			}
		}
	}
}

示例如下：

table.hl { 
 margin: 2em 0;  
 td.ln {  
         text-align: right;
       }
     }
 li { 
    font: { 
         family: serif; 
          weight: bold;  
          size: 1.3em;
           }
     }

3.2.1 2. 伪类嵌套

从上面我们可以看出，选择器嵌套得出的css样式相当于后代选择器一样，中间都有一个空格分隔，那如果想给一个元素添加:hover要怎么做呢?

&符就是来解决这个问题的。
语法: &:hover { }
示例如下：

// html结构
<div class="box">
	<a href="javascript:;">hello</a>
</div>
// .scss文件
// 这里我们希望鼠标悬停a的文本颜色改变
.box {
	a {
		&:hover {
			color: red;
		}
	}
}
--------------------------------------

// 生成的css代码
.box a:hover {
  color: red;
}

3.3、混入（Mixin）

Mixin包含一段合法Sass代码，类似于C语言的宏定义。调用Mixin时，解释器会将Mixin扩展成它所包含的完整的Sass代码，因此可以有效地减少代码重复，从而写出更加干净的代码。CSS不支持Mixin，因此重复和类似的代码必须挨个书写。

语法

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

使用: @include name；
示例如下:

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}
//sass最终生成

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

3.4、给混合器传参

混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是可以赋值给css属性值的变量。如果你写过JavaScript，这种方式跟JavaScript的function很像：

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

当混合器被@include时，你可以把它当作一个css函数来传参。如果你像下边这样写：

a {
  @include link-colors(blue, red, green);
}

//Sass最终生成的是：

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

3.5、 继承 extend

如果一个元素的样式和另一个元素的样式完全一样，这个元素无需再写一遍重复的样式，只需要使用@extend 就可以把另一个元素的所有样式全部继承过来

// .scss文件
.box1 {
	width: 200px;
	height: 200px;
}

// box2 继承 box1的样式
.box2 {
	@extend .box1;
}
--------------------------------------

// 生成的css代码
.box1, .box2 {
  width: 200px;
  height: 200px;
}

3.6、数学运算

包含+、-、*、/(加减乘除)

示例如下：

// .scss文件
.box {
	width: 50px + 50px;
	height: 100px - 50px;
	// 这里不能两个都带单位，否则是100px*px这种不合法的值
	margin-top: 10px * 10; 
	// css会将/认为是合法的，所以需要加括号
	padding-top: (100px / 2) ;
}
--------------------------------------

// 生成的css代码
.box {
  width: 100px;
  height: 50px;
  margin-top: 100px;
  padding-top: 50px;
}

3.7、 if条件语句

Sass可以根据条件判断给出特定的样式

语法：

@if 条件语句 {
} @ else if 条件语句 {
} @else

实例如下：

// .scss文件
.box {
	@if 1+1 == 2 {
		color: red;
	} @else if 1+1 == 3 {
		color: blud;
	} @else {
		color: pink;
	}
}
--------------------------------------

// 生成的css代码
.box {
  color: red;
}

以上就是Sass比较常用的一些语法了，希望能帮助到您可以了解Sass，如果想了解的更加详细全面，可以直接去Sass官网查阅文档链接: Sass中文网。