scss的基本语法，scss与less，sass，css的区别

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

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

细节：

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

2. 语法规范：

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

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

我们在实际开发过程中，scss是常用写法

scss 的基本语法：

1. 可以使用$来标识变量（可以将常用的样式标记成变量，后续复用即可，方便维护）

$highlight-color: #f40;
$basic-border: 1px solid black;

#app {
    background-color: $highlight-color;
  	border: $basic-border;
}  
复制代码

2. 嵌套语法（和less语法相同）

<div id="app">
    <div class="container">container</div>
</div>
复制代码

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

#app{
  background-color:  $highlight-color;
  border:$basic-border;
  .container{
    font-size:30px;
  }
}
复制代码

3. &父选择器(跟less语法相同)

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

$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;
    }
  }
}
复制代码

4. 模块化

可以将需要的变量定义在一个新的js文件中，需要使用的样式文件直接引入即可

@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作为你的样式后，一般在html页面中不得直接引入（因为浏览器中只支持css），vscode中有个名为Easy Sass的扩展可以将sass文件或scss文件自动转移成一个css文件，我们用的时候直接引入css文件

致敬我当码农的每一天！！！