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:
- 更短并且更易于书写。没有花括号