SCSS的基本使用

1.是什么

官方文档：https://www.sass.hk/

简言之可以理解scss是sass的一个升级版本，完全兼容sass之前的功能，又有了些新增能力。

2.理解sass、scss、less、css的区别

less, sass, scss都是css预处理语言（也是对应的文件后缀名），它们的语法功能比css更强大。

 预处理语言使用的方式是：开发时用预处理语言，在打包上线时，用webpack再配合loader工具给转成css（Cascading Style Sheets）给浏览器使用。

后缀名：SASS（Syntactically Awesome StyleSheets）版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss

语法规范方面的区别：

sass没有{}和;, 有严格的缩进规范

scss和css的缩进规范是一致的

注意：如使用vscode 可以安装一个名为easy sass 的插件，它会自动的帮助我们把.scss 转化 .css

3.SCSS-基本语法

变量

作用是：比如说页面中使用这个颜色的地方有100个，到时候只需改这个变量，100个地方的颜色也会随之改变

SCSS使用$符号来标识变量

变量的定义

1. $highlight-color: #f90;
2. $basic-border: 1px solid black;

变量的使用

1. #app {
2.     background-color: $highlight-color;
3.  border: $basic-border;
4. }

4.支持嵌套语法

和less一样，scss同样支持嵌套型的语法

// scss语法
$highlight-color: #f90;
$basic-border: 1px solid black;
#app{
  background-color:  $highlight-color;
  border:$basic-border;
  .container{
    font-size:30px;
  }
}

等同于转化为css后的

等同于CSS语法
#app {
  background-color: #f90;
  border: 1px solid black;
}
#app .container {
  font-size: 30px;
}

5. &父选择器

假如你想针对某个特定子元素 进行设置(注意看&符号的位置)

$highlight-color: #f90;
$basic-border: 1px solid black;
#app{
  background-color:  $highlight-color;
  border:$basic-border;
  .container{
    font-size:30px;
  }
  a{
    color:blue;
    &:hover{
      color: red;
    }
  }
}

6.模块

一个.scss文件就是一个模块，多个.scss文件之间可以相互引用。

例如：在一个.scss文件(base.scss)定义多个变量，然后在另一个.scss（test.scss）中引入这个文件，就可以使用其中定义的变量了

引入格式：  

@import './xxxx.scss';

举个实际的例子：

步骤1： 新建base.scss文件，并定义变量

$base-color: green;

步骤2： 在test.scss文件中中引入base.scss（注意看@import）

@import './base.scss';
$highlight-color: #f90;
$basic-border: 1px solid black;
#app{
  background-color:  $base-color;
  border:$basic-border;
  .container{
    font-size:30px;
  }
  a{
    color:blue;
    &:hover{
      color: red;
    }
  }
}

总结：

scss与less类似，只是一种css样式的预处理语言 (浏览器不能直接使用的，需要转成css)

很多用法都与less类似（变量，嵌套，模块化）不需要花太多精力去学习它。