Sass入门整理

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

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

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

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

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

二、基本特性

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

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

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

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

2.全局变量与局部变量

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

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

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

//选择器嵌套
//sass
nav {
  a {
    color: red;

    header & { //代表是当前选择器
      color:green;
    }
  }  
}

//编译完成后
//css
nav 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;
  }
}

//css
clearfix: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;
}
//CSS

div {
  cursor: e-resize;
}

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


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

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

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

猜你喜欢