scss用法总览

---

一、scss概述

1.动态样式语言：也称为预编译样式语言，指在CSS基础之上添加一些动态语言的特性，如变量、运算符、函数等，可以极大的提高样式代码的编写效率和可维护性。
2.当前主流动态样式语言有三种：
①Sass：最早诞生，功能最全面 —— Bootstrap4之后使用
②Stylus：功能强大，但是语法稍复杂
③Less：语法简单 —— Bootstrap3之前使用
注意：浏览器直接支持的样式语言只有原生的CSS，任何其它语法的样式代码都必须经过“翻译”转换为CSS才能被浏览器执行 —— 这个过程需要一款“编译器”软件
3. Sass：Syntactically Awesome Stylesheets，是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。
4. sass和scss的区别:
早期的(3.0之前)Sass称为Indented Sass（简称Sass），使用“缩进语法”，例如：使用“Tab”代替大括号，使用“换行”代替分号 —— 文件后缀名为 .sass
最新的(3.0之后)Sass称为Sassy CSS（简称SCSS），使用“标准CSS语法”，在此基础上添加新的特性 —— 文件后缀名为 .scss

---

二、安装Sass编译器

HBuilderX市场中提供了一款Sass编译器插件，称为compile-node-sass，在线安装后即可使用

1. 安装方法：
   点击HBuilderX菜单栏中的“工具”>“插件安装”>“安装新插件”>“前往插件市场安装”>搜索“scss”>点击插件“scss/sass编译”>“使用HBuilder导入插件”，安装完成后，重启HBuilderX即可使用。
2. 使用方法:
   在后缀名为.scss的文件中右键单击，选择“外部命令”>“scss/sass编译”>“1编译scss/sass”

3.报错
如果出现如下错误，说明系统中当前版本的Node.js与插件不兼容，需要下载相关的补丁：

相关补丁可以到GitHub搜索并下载，保存到上述问题所要求的目录中即可

4.实现“保存即自动编译”功能
如果觉得每次修改完.scss都要右键单击编译太麻烦，可以修改complile-node-scss的配置文件，实现“保存即自动编译”功能：
右键单击.scss文件>“外部命令”>“scss/sass编译”>“插件配置”>弹出的package.json配置文件中修改第27行： “onDidSaveExecution”: true > 保存并重启HBuilderX即可。

三、SCSS语法细则

（一）、注释

标准CSS只能使用多行注释（/**/）；
SCSS可以使用多行注释（/* */），也可以使用单行注释（//）,前者会被编译到.css文件中，后者则不会。

（二）、数据类型

1.SCSS支持 7 种主要的数据类型：
① 数字：1, .2, 13, 50%, 10px, 2.5em
② 字符串：有引号字符串与无引号字符串，“黑体”, ‘…/img/1.jpg’, bold
③ 颜色：blue, #04a3f9, rgba(255,0,0,0.5)
④ 布尔型：true, false
⑤ 空值：null
⑥ 数组 (list)：用空格或逗号作分隔符， 1.5em 1em 0 2em, Helvetica, Arial, sans-serif
⑦ maps： 相当于 JavaScript 的 object，(key1: value1, key2: value2)
2. SCSS支持如下的运算符：
① 算术运算： + - * / %
② 颜色运算： + - *
③ 字符串拼接： +
④ 逻辑运算： and or not
⑤ 调整运算顺序： ( )

p {
  font: 10px/8px;             
  $width: 1000px;
  width: $width/2;           
  width: round(1.5)/2;        
  height: (500px/2);          
  margin-left: 5px + 8px/2px; 
}

---

（三）、变量

变量以美元符号开头，赋值方法与 CSS 属性的写法一样：

$light-color: #f5f5f5;     //全局变量

body {
  $base-font: 14px;      //局部变量
  background-color: $light -color;
  border: 1px solid $light -color;
  font-size: $base-font;
}

可以使用 !default 为未经赋值的变量赋值（如果变量已经赋过值了，就不再赋值），从而保证变量不会被重复赋值：

$bg-color: #fff;
$bg-color: #eee;
$bg-color: #ddd !default;
$txt-color: #333 !default;

body {
  background-color: $bg-color;              //将编译为：#eee
  color: $txt-color;                           //将编译为：#333
}

---

（四）、占位符

不同于变量，占位符可以预先写一些样式，只有在调用的时候才会生效

%mr5 {
   margin-right:5px;
}
.header {
   @extend %mr5;	
}
=>
/*
.header {
   margin-right:5px;
}
*/

（五）、嵌套

1.Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，例如：

.f1 {
  width: 97%;

  .box {
    color: #000000;
  }
}

将被编译为这样的CSS代码：

.f1 {
  width: 97%;  
}

.f1  .box {
    color: #000000;  
}

2.属性嵌套
有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中，例如：

.box {
  font: {
    family: "黑体";
    size: 1.1em;
    weight: bold;
  }
}

被编译为：

.box {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
}

---

（六）、函数

SCSS中允许自定义函数：

@function  add( $c1, $c2 ){
    @return  $c1 + $c2
}

也提供了非常多的预定义函数：点这里

---

（七）、插值

通过 #{} 插值语句可以在选择器或属性名中使用变量：

$name: box;
$attr: border;

p.#{$name} {
  #{$attr}-color: blue;
  animation-name: "my-#{name}-anim";
}

---

（八）、选择和循环结构

与JavaScript等语言类似，SCSS中也有选择和循环结构：

$enable-border: true;

.box {
  @if  $enable-border  {
      border: 1px solid #aaa;
  }
  color: #333;
}

@for  $i   in  1  to  6 {
  .item#{$i} {
     font-size: 12px + $i * 2;
  }
}

---

（九）、样式混入 @mixin 和 @include指令

目的：样式复用
1.基本使用：
①.@mixin指令用于定义可重复使用的样式，但是不会引入不必要的class；
②.可以在后续的代码中使用@include指令引用之前定义的混合样式：
例如：

@mixin  bordered {
  border: 1px solid #aaa;
  padding: 5px;
  margin: 5px;
}

.btn {
  @include bordered;
  background-color: #eee;
}
.box {
  @include bordered;
  color: #333;
}

将编译为：

.btn {
  border: 1px solid #aaa;
  padding: 5px;
  margin: 5px;
  background-color: #eee;
}
.box {
  border: 1px solid #aaa;
  padding: 5px;
  margin: 5px;
  color: #333;
}

2.在使用混合指令时，还可以设定变量（形参），在后续引用时为这些变量提供实际数据（实参）：

@mixin  bordered($bw, $bc, $space: 5px) {
  border: $bw solid $bc;
  padding: $space;
  margin: $space;
}

.btn {
  @include bordered(1px, #aaa, 6px);
  background-color: #eee;
}
.box {
  @include bordered(2px, #bbb);
  color: #333;
}

将被编译为：

.btn {
  border: 1px solid #aaa;
  padding: 5px;
  margin: 5px;
  background-color: #eee;
}
.box {
  border: 1px solid #aaa;
  padding: 5px;
  margin: 5px;
  color: #333;
}

---

（十）、@import指令

CSS中也可以使用@import，用于在一个CSS文件中导入其它CSS文件 —— 属于客户端导入，即客户端浏览器还是需要发起两个HTTP请求，分别获取两个CSS文件。
SCSS中的@import指令属于服务器端导入，即在服务器端使用Node.js完成多个SCSS的合并编译为一个完整的CSS文件；客户端并不知道这个文件中的内容来自多个SCSS文件。
注意：如果希望监视编译目录的SCSS编译器不单独编译某个.scss文件，只需要将此文件名以下划线开头即可；导入此文件时，可以添加也可以省略下划线。

//假设当前目录下存在 _base.scss，则下面三条语句是等价的：
@import  "_base.scss";
@import  "base.scss";
@import  "base"

大多数情况下，一般在文件的最外层（不在嵌套规则内）使用 @import，其实，也可以将 @import 嵌套进 CSS 样式，如下例：

//_box.scss
.box {
  color: red;
}
//main.scss
.f2 {
   @import  "box"
}

将被编译为:

.f2  .box {
     color: red;
}

---

（十一）、@extend指令

一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class，一个通用样式，一个特殊样式。SCSS中可以使用 @extend 指令实现：

.btn {
  border:1px solid #aaa;
}
.btn-danger {
  @extend  .btn;
  background-color: #fcc;
}

将被编译为:

.btn, .btn-danger {
  border: 1px solid #aaa;
}

.btn-danger {
  background-color: #fcc;
}

四、Bootstrap定制

Bootstrap5的CSS文件（bootstrap.css）是编译后的结果，其源代码是用SCSS编写的，所以官方推荐如果需要修改或定制Bootstrap，不要直接修改bootstrap.css文件，而是应该修改其SCSS源文件。

五、相关文档推荐

单文件编译可以在下面的网站进行操作，多文件编译见下下节，中文文档缺失的东西挺多的，有条件的可以翻看英文文档。

中文文档：https://www.sass.hk

英文文档：https://sass-lang.com/documentation

CSS转Scss: https://www.sass.hk/css2sass

Scss转CSS: https://www.sassmeister.com