一、什么是scss？

1、scss

和less类似, sass 也是一种 CSS 的预编译语言
它提供了 变量、嵌套、 混合、 函数等功能，并且完全兼容 CSS 语法
Scss 官方文档：https://www.sass.hk/

2、 scss 和 sass 的区别

sass从第三代开始，放弃了缩进式风格，并且完全向下兼容普通的css代码，这一代的sass也被称为scss
sass 和 scss 其实是一样的css预处理语言
sass 版本 3.0 之前的后缀名为 .sass ，而版本 3.0 之后的后缀名. scss

二、基本使用

1、easy sass插件

为了方便使用scss，可以在VScode中安装一个插件，可以帮助我们将scss文件转化为css
插件：easy sass

2、定义变量

scss使用 $ 符来标识变量

// scss语法
$highlight-color: #f90;
$basic-border: 1px solid black;

3、使用变量

// scss语法
#app {
  background-color: $highlight-color;
  border: $basic-border;
}

4、变量范围

与css属性不同，变量可以在css规则定义之外存在。
当变量定义在css规则块内，那么该变量只能再次规则块内使用；如果它们出现在任何形式的{...}块中（如@media或@font-face块），情况如下

// scss语法
$nav-color :#f90;
nav {
  $width:100xpx;
  width: $width;
  color:$nav-color;
  background-color: black;
}

编译后

nav {
  width: 100px;
  color: #f90;
  background-color: black;
}

总结：
在上面的代码中，$nav-color这个变量定义在规则块的外边，所以这个样式表中都可以像 nav 规则块那样引用它

$width 这个变量定义在nav的{ }规则块内使用，所以它只能在nav规则块内使用，这意味着我们可以在样式表的其他地方定义和使用$width变量，不会对nav造成影响

5、嵌套语法

转换前

// scss语法
$highlight-color: #f90;
$basic-border: 1px solid black;

#app{
  background-color:  $highlight-color;
  border:$basic-border;

  .container{
    font-size:30px;
  }
}

转换之后

#app {
  background-color: #f90;
  border: 1px solid black;
}

#app .container {
  font-size: 30px;
}

6、父选择器

假如你想针对某个特定子元素 进行设置

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

7、scss与less区别

我们可以发现scss和less有很多相似之处，最大的区别就是在于声明变量的方式不同：
less采用的是@变量名，而less采用的是$变量名