Syntactically Awesome Style Sheets,帅气语法构成的样式表。

我们采用了Parcel来学习scss，使用npm i -D parcel下载parcel，然后在我们的目录下使用npx parcel index.html，parcel会帮我们安装node-sass并开一个ServerServer running at http://localhost:1234。

Hello,world
/* 1.scss */h1{    color: cyan;}复制代码

打开这个网址我们可以看到效果：

1. 此时我们更改scss代码使用嵌套选择器为：

body{    h1{        color: cyan;    }}复制代码

parcel会实时翻译我们改写的代码，其结果仍然可以正常显示。

2. scss可以定义变量

$color: cyan;body{    h1{        color: $color;    }}复制代码

颜色仍然能正常显示。

3. mixin

$color: cyan;@mixin color{    color: $color;}body{    h1{        @include color;    }}复制代码

效果如下：

此外mixin还可以传参:

$color: cyan;@mixin color($val:red){    color: $val;}body{    h1{        @include color($color)    }}复制代码

如果我们调用mixin时不传参则使用默认值red。

4. placeholder

$color:cyan;%color{  color: $color;}body{  h1{    @extend %color;  }}复制代码

这种写法会为我们增加并列的选择器来省代码。