scss-基本语法

我会带着你远行 2021-12-22 15:33 428阅读 0赞

## 文件 ##

scss文件分为两种：

1.  部分文件，文件名以\_开头，可以被多个文件引用；比如\_part1.scss，\_part2.scss。
2.  文件，可以是.sass或者.scss；page.sass，page.scss。

使用@import指令导入文件。

## 变量 ##

变量以$符号开头；比如：$default-color，$font-size。  
变量值以!default结尾表示默认值。$default-color:\#333 !default;。

## 混合器 ##

使用@mixin定义混合器，使用@include调用混合器。  
例如：

@mixin button{
    	width:100px;
    	height:80px;
    }

.a-button{
    	@include button
    }

最终解析成：

.a-button{
    	width:100px;
    	height:80px;
    }

当然，混合器也可以带参数，参数还可以设置默认值，例如：

@mixin button-size($width:100px,$height:80px){
    	width:$width;
    	height:$height;
    }

.a-button{
    	@include button(200px,160px)
    }

最终解析成：

.a-button{
    	width:200px;
    	height:160px;
    }

## 嵌套语法 ##

**可以使用嵌套语法来指定后代选择器。**  
原生的css使用后代选择器是这样的：

.a{
    	background-color:#666;
    }
    .a .b{
    	background-color:#666;
    }
    .a .b .c{
    	background-color:#666;
    }
    .a .b .c .d{
    	background-color:#666;
    }

但是使用scss的后代选择器的语法是这样的：

.a{
    	background-color:#666;
    	.b{
    		background-color:#666;
    		.c{
    			background-color:#666;
    			.d{
    				background-color:#666;
    			}
    		}
    	}
    }

这样可以避免多次写重复的选择器。  
**父选择器&**  
定义伪类选择器的时候需要用到父选择器&：

a-input{
    	width:100px;
    	height:80px;
    	&:hover{
    		background:gray;
    	}
    	&:focus{
    		background:white;
    	}
    }

## vue正确使用姿势 ##

vue配置全局sass，参考[css.loaderOptions][]和[向预处理器 Loader 传递选项][Loader]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzZWhz_size_16_color_FFFFFF_t_70]  
这样只需要在vue中配置全局main.scss就可以使用所有的scss样式了。

[css.loaderOptions]: https://cli.vuejs.org/zh/config/#css-loaderoptions
[Loader]: https://cli.vuejs.org/zh/guide/css.html#%E5%90%91%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8-loader-%E4%BC%A0%E9%80%92%E9%80%89%E9%A1%B9
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzZWhz_size_16_color_FFFFFF_t_70]: /images/20211220/8451cc84108747b69b3069ed61da96d7.png