SCSS初接触

SCSS实战：Parcel与Sass混搭技巧

最新推荐文章于 2022-01-20 18:30:00 发布

转载最新推荐文章于 2022-01-20 18:30:00 发布 · 72 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5bdef3925188254d2a11cc96

本文介绍如何使用Parcel构建工具配合Sass预处理器，实现样式表的实时编译与更新。通过具体示例，展示了SCSS语法的魅力，包括嵌套选择器、变量定义、mixin及placeholder等高级特性。

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;
}
复制代码

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

此时我们更改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;
  }
}
复制代码

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