SCSS-基本语法 sass、scss、less、css的区别

sass、scss、less、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的缩进规范是一致的

基本语法：

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

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

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

 转化成css后：

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

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

父选择器：假如想针对某个特定子元素 进行设置

$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;
    }
  }
}

变量

定义变量：sass使用$符号来标识变量

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

声明了名为$highlight-color 和$basic-border的变量,  使用变量了。

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

mixins：mixins混入，是代码复用的方式

定义格式：@mixin 名称 { 代码 }

使用格式：include 名称

示例

定义样式

@mixin container {
  width: 1200px;
  background-color: green;
}

@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

使用mixins

.div {
  width: 200px;
  @include clearfix;
  @include container;
}

模块

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

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

格式 ：@import './xxxx.scss';

示例

新建base.scss，并定义变量

$base-color: green;

在test.scss中引入base.scss

@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;
    }
  }
}