SCSS基本使用

最新推荐文章于 2025-04-24 15:15:29 发布

2501_90251315

最新推荐文章于 2025-04-24 15:15:29 发布

阅读量148

点赞数 3

文章标签： scss rust arcgis

本文链接：https://blog.youkuaiyun.com/2501_90251315/article/details/145218793

版权



> 
> 注意：如果安装报错的话，尝试这个版本：
> 
> 
>     "sass": "^1.32.10",
> 
> 
>     "sass-loader": "^10.1.0",
> 
> 
> 
> ```
> npm i -D sass@1.32.10 sass-loader@10.1.0
> ```
> 
> 



使用：


### 一、变量 $


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


![](https://img-blog.csdnimg.cn/20201017211401969.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70)![](https://img-blog.csdnimg.cn/20201017211410787.png)


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


![](https://img-blog.csdnimg.cn/2020101722164547.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70)![](https://img-blog.csdnimg.cn/20201017221651668.png)


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


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


![](https://img-blog.csdnimg.cn/20201017222042659.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70)![](https://img-blog.csdnimg.cn/20201017222048656.png)


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


![](https://img-blog.csdnimg.cn/20201017213713335.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70)![](https://img-blog.csdnimg.cn/20201017213719559.png)



### 二、嵌套


![](https://img-blog.csdnimg.cn/20201017211846636.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70)![](https://img-blog.csdnimg.cn/20201017211853113.png)


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

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


![](https://img-blog.csdnimg.cn/20201017212004396.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70)![](https://img-blog.csdnimg.cn/2020101721201823.png)


### 三、继承 @extend


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


![](https://img-blog.csdnimg.cn/20201017214537257.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70)![](https://img-blog.csdnimg.cn/20201017214336390.png)


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


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


![](https://img-blog.csdnimg.cn/2020101721505934.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70)![](https://img-blog.csdnimg.cn/20201017215106608.png)


还可以指定参数


![](https://img-blog.csdnimg.cn/2020101721535666.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70)![](https://img-blog.csdnimg.cn/20201017215401962.png)


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


![](https://img-blog.csdnimg.cn/20201017215637963.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70)![](https://img-blog.csdnimg.cn/2020101721564445.png)


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


![](https://img-blog.csdnimg.cn/20201017215720176.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70)![](https://img-blog.csdnimg.cn/20201017215725761.png)


还可以指定多个参数


![](https://img-blog.csdnimg.cn/20201017220000685.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70)![](https://img-blog.csdnimg.cn/20201017220007396.png)


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


![](https://img-blog.csdnimg.cn/20201017220136129.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70)![](https://img-blog.csdnimg.cn/2020101722014341.png)


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


![](https://img-blog.csdnimg.cn/20201017220351993.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70)![](https://img-blog.csdnimg.cn/20201017220358644.png)


### 五、引入外部文件


#### @import


![](https://img-blog.csdnimg.cn/20201017220835448.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70)


![](https://img-blog.csdnimg.cn/20201017220847486.png)


#### Partials


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


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


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


![](https://img-blog.csdnimg.cn/20201017234349128.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70)


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


![](https://img-blog.csdnimg.cn/20201017234355714.png)


### 六、！default，！global


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


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


### 七、语句


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


![](https://img-blog.csdnimg.cn/20201017225105715.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70)![](https://img-blog.csdnimg.cn/20201017225111394.png)


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


@for ,@while,@each

@for $i from through
@for $i from to


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