SCSS基本使用

雨点打透心脏的1/2处 2021-09-02 06:45 553阅读 0赞

Sass官网：[https://www.sass.hk/docs/][https_www.sass.hk_docs]

菜鸟教程Sass：[https://www.runoob.com/sass/sass-tutorial.html][https_www.runoob.com_sass_sass-tutorial.html]

Sass就是css的预处理器，Scss是Sass3版本中引入的新语法特性

vue中使用scss，安装：

cnpm i -S node-sass sass-loader

使用：

## 一、变量 $ ##

使用$符号去声明一个变量

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]![20201017211410787.png][]

给同一个变量再次赋值时，后赋值的会替换先赋值的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]![20201017221651668.png][]

可以在变量的结尾添加 `!default` 给一个未通过 `!default` 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。

通俗点说，！default就像一个备胎。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]![20201017222048656.png][]

如果变量需要镶嵌在字符串之中，就必须需要写在\#\{\}之中。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3][]![20201017213719559.png][]

## 二、嵌套 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4][]![20201017211853113.png][]

在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：

a {
    　　&:hover { color:red; }
    　}

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 5][]![2020101721201823.png][]

## 三、继承 @extend  ##

SASS允许一个选择器，继承另一个选择器。使用@extend

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 6][]![20201017214336390.png][]

## 四、混入 **@mixin 、**@include ##

Mixin是可以重用的代码块。使用@mixin命令，定义一个代码块，使用@include命令，调用这个mixin。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 7][]![20201017215106608.png][]

还可以指定参数

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 8][]![20201017215401962.png][]

还可以给参数指定默认值，如果在使用时没有提供参数，则参数会使用默认值；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 9][]![2020101721564445.png][]

如果提供了参数，则会使用提供的参数覆盖默认参数的值

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 10][]![20201017215725761.png][]

还可以指定多个参数

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 11][]![20201017220007396.png][]

参数会按定义的顺序依次赋值

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 12][]![2020101722014341.png][]

用以下的方式还可以让顺序按照自己想法来

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 13][]![20201017220358644.png][]

## 五、引入外部文件 ##

### @import ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 14][]

![20201017220847486.png][]

### Partials ###

如果需要导入 SCSS  文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。

例如，将文件命名为 `_color.scss`，便不会编译成 `_color.css` 文件。

**@import "color.scss" 导入的其实是 `_colors.scss` 文件**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 15][]

（注意，不可以同时存在添加下划线与未添加下划线的同名文件，否则添加下划线的文件将会被忽略。）

![20201017234355714.png][]

## 六、！default，！global ##

！default上面已经介绍到了，可以把它理解成为一个备胎。

！global就是可以将变量提升为全局变量。不到万不得已，不要用它，因为它很简单粗暴，直接破坏了作用域规则，影响全局

## 七、语句 ##

### 7.1 条件语句 @if,@else if,@else ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 16][]![20201017225111394.png][]

### 7.2 循环语句 @for ,@while（平时用的比较少，暂时先了解） ###

@for ,@while,@each

@for $i from <start> through <end>
    @for $i from <start> to <end>

*  $i 表示变量
 *  start 表示起始值
 *  end 表示结束值

这两个的区别是关键字 through 表示包括 end 这个数，而 to 则不包括 end 这个数。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 17][]

具体的参考：[https://blog.csdn.net/deng\_gene/article/details/52399755][https_blog.csdn.net_deng_gene_article_details_52399755]，[http://www.ruanyifeng.com/blog/2012/06/sass.html][http_www.ruanyifeng.com_blog_2012_06_sass.html]

## 八、自定义函数 　@function ##

![20201017223808197.png][]![20201017223817115.png][]

## 九、颜色函数 ##

color: **lighten**(green, 10%);表示绿色变浅10%

color: **darken**(green, 10%); 表示绿色加深10%

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 18][]

[https_www.sass.hk_docs]: https://www.sass.hk/docs/
[https_www.runoob.com_sass_sass-tutorial.html]: https://www.runoob.com/sass/sass-tutorial.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201017211401969.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20201017211410787.png]: /images/20210725/08868b93d0ff40b09f53e1f8dccdd4b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020101722164547.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20201017221651668.png]: /images/20210725/d98b1c09e50b41218d428e7295742ded.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201017222042659.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20201017222048656.png]: /images/20210725/04214e743786476da4a2bd04aea59a76.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201017213713335.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20201017213719559.png]: /images/20210725/41260671f3734ff3b21a263235518808.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201017211846636.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20201017211853113.png]: /images/20210725/f9ae1552ebe24e258742bf2c3b9774dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201017212004396.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[2020101721201823.png]: /images/20210725/5355018a85d84dc78a15f8bad72c3e00.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201017214537257.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20201017214336390.png]: /images/20210725/2a10ff7487e74e06b4d4fc3330620ebc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/2020101721505934.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20201017215106608.png]: /images/20210725/e5e9912c04724220bd196c83270612e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/2020101721535666.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20201017215401962.png]: /images/20210725/9cc749d1a8c6470b9bb4046a3cc299be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20201017215637963.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[2020101721564445.png]: /images/20210725/035b148696b2447c957e5ba15d824098.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20201017215720176.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20201017215725761.png]: /images/20210725/2984a16129f940dcbdd6f9338fa1afa6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20201017220000685.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20201017220007396.png]: /images/20210725/6d51d4a646334701b264b36b8710cf26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20201017220136129.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[2020101722014341.png]: /images/20210725/a473149ffee24f718344629247087fee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20201017220351993.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20201017220358644.png]: /images/20210725/34bdfd2ca8bc46cd88aca1cb0840c733.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 14]: /images/20210725/fa1fc694ab9e45c2bade71984cc50ac1.png
[20201017220847486.png]: /images/20210725/a2fee7d07fce45c989d819e603be711d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 15]: /images/20210725/33e77efb7fa34bccbd8e780dce5c2146.png
[20201017234355714.png]: /images/20210725/64effb1d60c046ea805fd7bc527a0d35.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 16]: https://img-blog.csdnimg.cn/20201017225105715.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20201017225111394.png]: /images/20210725/e350439852b04168be4f2d6e5c7ffe6a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 17]: /images/20210725/a1f22357478c402ab8faec6f2602fb5b.png
[https_blog.csdn.net_deng_gene_article_details_52399755]: https://blog.csdn.net/deng_gene/article/details/52399755
[http_www.ruanyifeng.com_blog_2012_06_sass.html]: http://www.ruanyifeng.com/blog/2012/06/sass.html
[20201017223808197.png]: https://img-blog.csdnimg.cn/20201017223808197.png
[20201017223817115.png]: /images/20210725/1e5988433186417a866bb5d14b4141dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 18]: /images/20210725/ddb0a87d8a934736ad9c18b67c589daf.png