Sass/SCSS（关系，安装，webstorm配置编译，使用，语法）

Sass/SCSS的关系，SCSS的安装，webstorm编译配置SCSS，SCSS使用（语法）

一 、 Sass、SCSS

Sass：一种css预处理器和一种语言。Sass（预处理器）有两种不同的语法：

• Sass : 一种缩进语法
• SCSS : 一种 CSS-like 语法

Sass

Sass使用类似Ruby的语法，没有花括号，没有分号，具有严格的缩进，就像这样：

// 变量
!primary-color= hotpink

// 混入
=border-radius(!radius)
    -webkit-border-radius= !radius
    -moz-border-radius= !radius
    border-radius= !radius

.my-element
    color= !primary-color
    width= 100%
    overflow= hidden

.my-other-element
    +border-radius(5px)

//@import
@import themes/dark
@import font.sass

* 注：变量的标志用 !，而不是 $；分配符是 = 而不是 : 。

SCSS

SCSS和Sass相比更加贴近CSS语法。Sass语法中的!和=换成了SCSS中的$和:。就像这样：

// 变量
$primary-color: hotpink;

// 混入
@mixin border-radius($radius) {
   
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

.my-element {
    color: $primary-color;
    width: 100%;
    overflow: hidden;
}

.my-other-element {
    @include border-radius(5px);
}

//@import
@import "themes/dark";
@import "font.sass";

* 注：变量的标志用 $ ，分配符是 : 。

总结：

Sass：

• 更短并且更易于书写。没有花括号