Sass入门整理

本是古典何须时尚 2022-06-04 06:25 202阅读 0赞

本文主要介绍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 的嵌套分为三种：选择器嵌套、 属性嵌套、 伪类嵌套

//选择器嵌套
    //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; 
    }

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