SCSS初接触

Syntactically Awesome Style Sheets,帅气语法构成的样式表。
我们采用了Parcel来学习scss，使用npm i -D parcel下载parcel，然后在我们的目录下使用npx parcel index.html，parcel会帮我们安装node-sass并开一个ServerServer running at http://localhost:1234。

<h1>Hello,world</h1>
/* 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;
  }
}

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