Sass入门整理

本文主要介绍Sass的语法格式，基础特性和基础运算特性。简单整理，备忘。

一、语法格式
说到语法格式就不得不了解 sass 和 scss 的区别：
1. 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
2. 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号( {} )和分号( ; )，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

sass 比较老了，而且规范不容易被人接受，所以出现了 scss ，相比 sass 不容易出错，而且更好接受。scss 的语法格式对于从事前端工作的同学来说更易于接受，这也是 scss 为什么更被前端人员青眯的原因。（注意：scss 的语法格式书写的文件后缀名必须为 .scss ）

每个人编写的 CSS 样式风格都不一样，有的喜欢将所有样式代码都写在同一行，而有的喜欢将样式分行书写，或者说在不同的需要环境中就需要又不同的输出方式。在 Sass 中编译出来的样式风格也可以按不同的样式风格显示。其主要包括以下几种样式风格：

1. 嵌套输出方式 nested – 嵌套方式输出，花括号跟最后一行在一行。
2. 展开输出方式 expanded – 跟嵌套很像，只不过花括号另起一行。
3. 紧凑输出方式 compact – 一个元素的样式在一块，不自动换行。
4. 压缩输出方式 compressed – 不同元素的样式也在一行，去除所有多余空格，空行，注释。

二、基本特性

1. 声明变量、默认变量、变量调用

   Sass 的变量包括三个部分：声明变量的符号“$”、变量名称、赋予变量的值。

   变量的调用也很简单，在需要的地方写入变量名即可。

   默认变量，仅需要在值后面加上 !default 即可。默认变量只是设置默认值，在需要的时候可以覆盖，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可.

   2.全局变量与局部变量

$color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量).block {  color: $color;//调用全局变量}em {  $color: red;//定义局部变量  a {    color: $color;//调用局部变量  }}span {  color: $color;//调用全局变量}//$color 就是一个全局变量，而定义在元素内部的变量，比如 $color:red; 是一个局部变量。

全局变量就是定义在元素外面的变量，当在局部范围（选择器内、函数内、混合宏内…）声明一个已经存在于全局范围内的变量时，局部变量就成为了全局变量的影子。基本上，局部变量只会在局部范围内覆盖全局变量。

3.Sass 的嵌套分为三种：选择器嵌套、 属性嵌套、 伪类嵌套

//选择器嵌套//sassnav {  a {    color: red;    header & { //代表是当前选择器      color:green;    }  }  }//编译完成后//cssnav a {  color:red;}header nav a {  color:green;}//属性嵌套主要针对一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性。//sass.box {  border: {   top: 1px solid red;   bottom: 1px solid green;  }}//css.box {    border-top: 1px solid red;    border-bottom: 1px solid green;}//伪类嵌套和属性嵌套非常类似，只不过他需要借助`&`符号一起配合使用--& 代表当前选择的元素。//sass.clearfix{&:before,&:after {    content:"";    display: table;  }&:after {    clear:both;    overflow: hidden;  }}//cssclearfix:before, .clearfix:after {  content: "";  display: table;}.clearfix:after {  clear: both;  overflow: hidden;}

4.混合宏

混合宏的出现主要是解决样式复杂，需要重复使用大段的样式，变量无法满足的状况。

    //在 Sass 中，使用“@mixin” 关键词来声明一个混合宏，由关键词，宏名称， 样式代码，三部分组成如：    @mixin border-radius{    -webkit-border-color: 5px;    border-color: 5px;}//还可以声明带参数的混合宏：@mixin border-radius($color:#333){    -webkit-border-radius: $color;    border-radius: $color;}//还有更复杂的宏，可以在样式代码中写逻辑关系，比如：@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) ”。//混合宏的强大之处在于它可以传参数，参数可以没有值也可以有默认值，还可以传递多个参数。

实际调用中，利用关键词“@include”来调用声明好的混合宏，后边加上宏名称即可。

混合宏的不足：混合宏在实际编码中给我们带来很多方便之处，特别是对于复用重复代码块。但其最大的不足之处是会生成冗余的代码块。比如在不同的地方调用一个相同的混合宏时。sass 并不能智能的将相同的样式代码块合并在一起。

5.扩展/继承

在 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-second {  background-color: orange;  color: #fff;  @extend .btn;}

编译出的css：

//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-clor: orange;  color: #fff;}

6.占位符

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

//SCSS%mt5 {  margin-top: 5px;}%pt5{  padding-top: 5px;}//这两个如果不调用不会出现在编译完后的 css 中.btn {  @extend %mt5;  @extend %pt5;}.block {  @extend %mt5;  span {    @extend %pt5;  }}//编译完成后//CSS.btn, .block {  margin-top: 5px;}.btn, .block span {  padding-top: 5px;}//它也具备继承的特性，将继承同样样式的选择器进行组合

相比较宏、继承、占位符三者来说，没有哪一个可以万能，只有在合适的情况下运用那个方法。
如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。

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

占位符和继承的主要区别，“占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。

7.注释

在 Sass 中注释有两种方式，我暂且将其命名为：

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

两者区别，前者会在编译出来的 CSS 显示，后者在编译出来的 CSS 中不会显示。

8.数据类型
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。

9.字符串
SassScript 支持 CSS 的两种字符串类型：

有引号字符串 (quoted strings)，如 "Lucida Grande" 、'http://sass-            lang.com'；无引号字符串 (unquoted strings)，如 sans-serifbold。

在编译 CSS 文件时不会改变其类型。只有一种情况例外，使用 #{ }插值语句 (interpolation) 时，有引号字符串将被编译为无引号字符串，这样方便了在混合指令 (mixin) 中引用选择器名.

当 deprecated = property syntax 时 （暂时不理解是怎样的情况），所有的字符串都将被编译为无引号字符串，不论是否使用了引号。

10.值列表
所谓值列表 (lists) 是指 Sass 如何处理 CSS 中通过空格或者逗号分隔的一系列的值。
事实上，独立的值也被视为值列表——只包含一个值的值列表。

Sass列表函数（Sass list functions）赋予了值列表更多功能：

nth函数（nth function） 可以直接访问值列表中的某一项；join函数（join function） 可以将多个值列表连结在一起；append函数（append function） 可以在值列表中添加值； @each规则（@each rule） 则能够给值列表中的每个项目添加样式。

三、运算特性

1.加法/减法

Sass 中的加法/减法运算，在变量或属性中都可以做加法/减法运算。如：

//in mm cm  pt pc px等绝对单位都能运算，ex em rem等相对当前字体的都不能运算，对于携带不同类型的单位时，在 Sass 中计算会报错，即绝对单位 + 相对单位 就会报错.box {  width: 20px + 8in;}//1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px//编译完后.box {  width: 788px;}

2.乘法/除法

Sass 中的乘法/除法运算和前面介绍的加法与减法运算还略有不同。虽然他也能够支持多种单位（比如 em ,px , %），但当一个单位同时声明两个值时会有问题，就是参与运算的两个数只需要一个带单位即可：

//会报错.box {  width:10px * 2px;  }//不会报错.box {  width: 10px * 2;}//css.box {  width: 20px;}//同样，不同单位类型也会报错。

3.变量计算

在 Sass 中除了可以使用数值进行运算之外，还可以使用变量进行计算。在 Sass 中使用变量进行计算，这使得 Sass 的数学运算功能变得更加实用。举个栗子：

$container-width: 720px;$sidebar-width: 220px;$gutter: 20px;.container {  width: $content-width + $sidebar-width + $gutter;  margin: 0 auto;}

4.数字运算

在 Sass 运算中数字运算是较为常见的，数字运算包括前面介绍的：加法、减法、乘法和除法等运算。而且还可以通过括号来修改他们的运算先后顺序。和我们数学运算是一样的。
5.颜色运算

所有算数运算都支持颜色值，并且是分段运算的。也就是说，红、绿和蓝各颜色分段单独进行运算。如：

p {  color: #010203 + #040506;}//计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09， 并且被合成为：p {  color: #050709;}

算数运算也能将数字和颜色值 一起运算，同样也是分段运算的。如：

p {  color: #010203 * 2;}//计算公式为 01 * 2 = 02、02 * 2 = 04 和 03 * 2 = 06， 并且被合成为：p {  color: #020406;}

6.字符运算

在 Sass 中可以通过加法符号“+”来对字符串进行连接。例如：

$content: "Hello" + "" + "Sass!";.box:before {  content: " #{$content} ";}//CSS.box:before {  content: " Hello Sass! ";}

除了在变量中做字符连接运算之外，还可以直接通过 +，把字符连接在一起：

div {  cursor: e + -resize;}//CSSdiv {  cursor: e-resize;}

注意，如果有引号的字符串被添加了一个没有引号的字符串 （也就是，带引号的字符串在 + 符号左侧）， 结果会是一个有引号的字符串。 同样的，如果一个没有引号的字符串被添加了一个有引号的字符串 （没有引号的字符串在 + 符号左侧）， 结果将是一个没有引号的字符串。 例如：

p:before {  content: "Foo " + Bar;  font-family: sans- + "serif";}//CSSp:before {  content: "Foo Bar";  font-family: sans-serif; }

本文主要是作者为了在方便的时候再次回顾，所以如有不足之处请指出改正。