安装parcel

1. 打开目标文件夹(文件夹里面有一个 xx.html文件 与一个 yyy.scss)

cd scss-demo

2. npm 快速初始化(可以跳过一些基础设置)

npm init -y

3. 在目标文件中安装parcel

npm i -D parcel

4. 用parcel编译目标文件(这个过程中会安装Node Sass)，把.scss转化成.css

npx parcel index.html

---

SCSS的常用功能

嵌套选择器

?如下

<style>.box {  border: 2px solid grey;}.box > ul {  background-color: pink;}.box > ul > li {  color: greenyellow;  border: 2px solid blue;}</style><div class="box">  <ul>    <li>First</li>    <li>Second</li>    <li>Thrid</li>  </ul></div>

上例中的CSS可以使用SCSS嵌套，如下demo
?SCSS基础用法①-嵌套

.box {  border: 2px solid grey;  > ul {    background-color: pink;    > li {      border: 2px solid blue;      color: grey;    }  }}

---

变量 $variable

任何值都可以作为变量。且变量可以作为另一个变量的值(如?的变量$grey作为变量$gray的值)，这样就使两个变量其实代表的是一个值。还有一点好处是使用SCSS变量可以批量修改样式，如果下面的.box与li的边框的大小都要变成3px，这时候就可以直接把 $border-width: 3px即可，而不需要逐逐项去修改

?SCSS基础用法②-变量

$grey: #666;$gray: $grey;$border-width: 2px;.box {  border: $border-width solid $grey;  > ul {    background-color: pink;    > li {      border: $border-width solid blue;      color: $gray;    }  }}

---

@mixin

在@mixin模式中结合@include只是把代码机械的拷贝过来，总体上代码的量并不会减少(只是减少你重复书写代码，但是打开控制台代 .scss文件编译生成的 css代码并没有减少)。

demo?SCSS基础用法③mixin 基本使用、参数、默认参数

• mixin 最基本的用法

@mixin test {  border: 3px solid red;}.box {  @include test}/* box 对应的 border样式就是 @mixin test中被{} 包裹起来的样式，当然也可以是多个样式 */

• mixin 参数模式(mixin的参数模式也可以支持 设定默认的参数)
  ?

<div class="box1">  <ul>    <li>one</li>    <li>two</li>    <li>three</li>  </ul></div>

SCSS参数模式，以及默认参数 下面的 greenyellow与#999就是设定的参数的默认值

@mixin test1($color: greenyellow, $bgc: #999)   {  border: 2px solid $color;   background-color: $bgc;}.box1 {  @include test1(green);  > ul {    @include test1(greenyellow,pink)  }}

---

占位符选择器%foo(Placeholder Selectors: %foo) 与 @extend

达成上面的图片效果的CSS

.box > div {  background-color: #ccc;    width: 300px;    height: 120px;    border-radius: 4px;    box-shadow: 1.5px 1.5px 1px .8px rgba(0, 0, 0, .5)}

如果在另外一个CSS 选择器，也需要同样的样式，则需要把上面的样式全部赋值过去粘贴，这无疑是一件费力不讨好的事情。当然我们机智的想到了使用SCSS mixin

?如下

<div class="box">  <div></div></div><div class="box1">  <div></div></div>

要使.box > div与.box1 > div达到下图的效果，则需要

方法一：mixin
mixin 模式demoSCSS基础用法④-1 mixin 与 placeholder的区别比较

SCSS编译生成的CSS

方法二：placeholder selector
placeholder 模式demo SCSS基础用法④-2 占位符选择器 Placeholder Selector

%box-style {    background-color: #ccc;    width: 300px;    height: 120px;    border-radius: 4px;    box-shadow: 1.5px 1.5px 1px .8px rgba(0, 0, 0, .5);    margin-bottom: 20px;}.box > div {    @extend %box-style;}.box1 > div {    @extend %box-style;}

SCSS编译生成的CSS

从上面的mixinSCSS编译的CSS与placeholder selectorSCSS编译的CSS可以看出。对于同样的样式mixin实质就是把样式对应的CSS全部拷贝到另一个CSS选择器，如把div > box的样式全部拷贝到div1 > box选择器下面；而placeholder只是把设定同样样式的CSS选择器拷贝到 对应的CSS前面，如把box1 > div拷贝到box > div对应的样式前面

---

参考：
Sass: Sass Basics

---

版权声明：本文为博主原创文章，未经博主许可不得转载

原著是一个有趣的人,若有侵权,请通知删除