SCSS初探-1

安装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

SCSS基础使用-placeholder selector %sele-20200610.png

达成上面的图片效果的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达到下图的效果，则需要

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

SCSS编译生成的CSS

SCSS基础使用之placeholder与mixin的区别-2-20200610.png
方法二：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

SCSS基础使用之placeholder与mixin的区别-1-20200610.png

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

---

参考：
Sass: Sass Basics

---

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