引言

Sass（Syntactically Awesome Stylesheets）和SCSS（Sassy CSS）是两种用于编写层叠样式表（CSS）的CSS预处理器。

Sass是较早的一种语法形式，采用类似于缩进的格式来组织代码。它提供了一些有用的功能，如嵌套规则、变量、混合（Mixins）、继承（Inheritance）等，这些功能使得CSS代码更加模块化、可重用和易于维护。然而，由于其特殊的语法形式，有些开发者可能觉得难以理解和书写。

为了解决这个问题，Sass团队在Sass版本3中引入了SCSS语法，即Sassy CSS。SCSS语法采用了与CSS相似的语法形式，使用大括号和分号来组织代码，这使得CSS开发者更容易上手并且可以直接复用现有的CSS代码。因此，SCSS语法更受广大开发者的欢迎。

尽管Sass和SCSS语法形式不同，但它们的功能和特性基本上是相同的。事实上，Sass团队通常将这两种语法称为Sass，而不特别区分。之所以普遍称为Sass，可能是因为Sass这个名称比SCSS更早被广泛使用。

总结起来，Sass和SCSS是用于编写CSS的两种不同的语法形式。Sass使用缩进格式，而SCSS使用大括号和分号的形式。尽管它们有一些区别，但在实际使用中，它们的功能和特性几乎相同。

基础篇

变量声明style.scss

scss 复制代码

$out-bg: deeppink;

scss 复制代码

<style scoped lang="scss">
// 导入scss文件中声明的变量
@import './style.scss';
// 声明在当前style作用域下的变量，相对于当前style则是全局变量
$bg: pink;
.test-sass {
  // 声明在test-sass块下的变量，不能在当前块外使用
  $h: 200px;
  .header {
    background-color: $bg;
    height: $h;
  }
}
.test-sass-2 {
  // 使用文件导入的变量
  background-color: $out-bg;
}
</style>

变量名用中划线还是下划线分隔

使用中划线 还是下划线 ，这完全取决于个人的喜好，但使用中划线的方式更为普遍；用中划线声明的变量可以使用下划线的方式引用，用下划线声明的变量也可以用中划线的方式引用。

scss 复制代码

$bg-color: yellow;
.test-sass-2 {
  background-color: $bg_color;
}

// 编译后
.test-sass-2 {
  background-color: yellow;
}

父选择器的标识符&

scss 复制代码

article a {
  color: blue;
  &:hover { color: red }
}

// 编译后
article a { color: blue }
article a:hover { color: red }

群组选择器的嵌套

scss 复制代码

nav, aside {
  a {color: blue}
}

// 编译后
nav a, aside a {color: blue}

子组合选择器和同层组合选择器：>、+和~;

scss 复制代码

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

// 编译后
article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

嵌套属性和属性缩写

嵌套属性的规则是这样的：把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。就像css选择器嵌套一样，sass会把你的子属性一一解开，把根属性和子属性部分通过中划线-连接起来，最后生成的效果与你手动一遍遍写的css样式一样：

scss 复制代码

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

// 编译后
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

对于属性的缩写形式，你甚至可以像下边这样来嵌套，指明例外规则：

scss 复制代码

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

// 编译后
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

使用@import导入SASS文件

使用sass的@import规则并不需要指明被导入文件的全名。你可以省略.sass或.scss文件后缀（见下图）。这样，在不修改样式表的前提下，你完全可以随意修改你或别人写的被导入的sass样式文件语法，在sass和scss语法之间随意切换。举例来说，@import"sidebar";这条命令将把sidebar.scss文件中所有样式添加到当前样式表中。

使用SASS部分文件

当通过@import把sass样式分散到多个文件时，你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。对此，sass有一个特殊的约定来命名这些文件。

此约定即，sass局部文件的文件名以下划线开头。这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。当你@import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线。举例来说，你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import "themes/night-sky";。

局部文件可以被多个不同的文件引用。当一些样式需要在多个页面甚至多个项目中使用时，这非常有用。在这种情况下，有时需要在你的样式表中对导入的样式稍作修改，sass有一个功能刚好可以解决这个问题，即默认变量值。

使用!default设置默认值

style.scss

scss 复制代码

$size: 50px;

scss 复制代码

// 导入scss文件中声明的变量
@import './style';
// 设置$size默认值，如果导入的scss文件中存在该变量，则会使用导入文件的变量值，否则使用默认值
$size: 20px !default;
.test-sass-2 {
  font-size: $size; // 50px
}

嵌套导入

_blue-theme.scss

scss 复制代码

aside {
  background: blue;
  color: white;
}

css 复制代码

.blue-theme {@import "blue-theme"}

//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。
.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

混合器@mixin

style.scss

scss 复制代码

$size: 50px;
@mixin radius{
  width: 100px;
  height: 100px;
  border: 2px solid deepskyblue;
  border-radius: 50%;
}

scss 复制代码

@import './style';
.test-sass-2 {
  font-size: $size;
  @include radius
}

// 编译后
.test-sass-2 {
  font-size: 50px;
  width: 100px;
  height: 100px;
  border: 2px solid deepskyblue;
  border-radius: 50%;
}

给混合器传参

scss 复制代码

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

pink和deeppink分别为 <math xmlns="http://www.w3.org/1998/Math/MathML"> h o v e r 和 hover和 </math>hover和visited的默认值，当混合器被@include时，你可以把它当作一个css函数来传参。如果你像下边这样写：

scss 复制代码

a {
  @include link-colors(blue, red, green);
}
// 或者
a {
  @include link-colors(
  $normal: blue,
  $visited: green,
  $hover: red
 )
}

//Sass最终生成的是：
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

选择器样式继承@extend

scss 复制代码

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

// 相当于class="seriousError error"

.seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承，如下代码:

css 复制代码

//.seriousError从.error继承样式
.error a{  //应用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //应用到hl.seriousError
  font-size: 1.2rem;
}

往期回顾

一文学会请求中断、请求重发、请求排队、请求并发

一文学会vue3如何自定义hook钩子函数和封装组件

# 都2023了，还不会开发一个属于自己的组件库？

文章参考：sass中文网

还只会使用sass变量？几分钟快速入门sass/scss

引言

基础篇

变量声明style.scss

变量名用中划线还是下划线分隔

父选择器的标识符&

群组选择器的嵌套

子组合选择器和同层组合选择器：>、+和~;

嵌套属性和属性缩写

使用@import导入SASS文件

使用SASS部分文件

使用!default设置默认值

嵌套导入

混合器@mixin

给混合器传参

选择器样式继承@extend

往期回顾