Scss的使用

是什么，为什么要用

Sass是css预处理器，它扩展了css语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使得css更易维护和扩展，可以更好的编写样式。最终通过编译会转变成css。

.sass vs .scss

一开始sass的语法与css写法不一致，导致很多人用起来不方便，后面在sass3.0中就将核心语法改成了.scss

scss是css的一个超集，写法和css相同的同时，还兼备了sass中增加的新特性

以下用的都是.scss语法

怎么用（vue3中使用）

安装

vue中使用scss，需要先安装sass

npm install sass sass-loader

使用

<style lang="scss" scoped>
</style>

需要声明lang="scss"，表明style中使用的是scss语法编写的样式，告诉Vue构建器，在将这个组件编译成HTML、Css之前，需要先用一个SCSS编译器处理这里的内容。

项目中成功引入scss后，我们需要了解一下sass中一些特性的使用

1. 变量

使用$符号定义变量,变量类型可以是数字、字符串、颜色、null、列表和maps

当需要定义一个主题色，就可以使用变量来定义，方便后续修改，以往需要再每一个定义了颜色的地方都对颜色进行修改，这里只需要将变量的值进行修改，极大的提高了效率

$primaryColor:pink;
body{
background:$primaryColor;//编译后background:pink;
}
span{
color:$primaryColor;
}

2. 数学计算

sass允许使用数学表达式，包含+ - * / % == !=

$container-width: 100%;
.container {
  width: $container-width;//编译后width:100%;
}
.col-4 {
  width: $container-width / 4;//编译后width:25%;
}

3. 函数

sass提供了以下内置模块

• sass:math模块提供了对数字进行操作的函数。
• sass:string模块可以轻松组合、搜索或拆分字符串。
• sass:color模块根据现有颜色生成新颜色，使构建颜色主题变得容易。
• sass:list模块允许您访问和修改列表中的值。
• sass:map模块可以查找与地图中键关联的值，等等。
• sass:selector模块提供对Sass强大的选择器引擎的访问。
• sass:meta模块揭示了Sass内部工作的细节。

使用

@use "sass:color"
.button {
  $primary-color: #6b717f;
  color: $primary-color;
  border: 1px solid color.scale($primary-color, $lightness: 20%);
}

以下是一些常见函数的基本使用

Color（颜色函数）

sass包含很多操作颜色的函数。例如：ligthen()与darken()函数可用于调亮或调暗颜色，opacity()函数使颜色透明度减少，transparent()函数使颜色透明度增加，mix()函数可用来混合两种颜色

<style lang="scss" scoped>
$primaryColor:#5c7a29;
.p0{
background-color:$primaryColor;
}
.p1{
//让颜色变亮 lighten($color,$amount) $amount取值在0%~100%之间
background-color:lighten($primaryColor，30%)；
}
.p2{
//让颜色变暗，通常使用color.scale()代替方案
background-color:darken($primaryColor,15%)
}
.p3{
//降低颜色透明度，通常使用color.scale()代替方案
background-color:opacity(rgba($primaryColor,0.1),0.5)
}
</style>

String(字符串函数)

如向字符串添加引号的quote()、获取字符串长度的string-length()和将内容插入字符串给定位置的string-insert()

p{
&:after{
content:quote(这是里面的内容);//编译后content:"这是里面的内容";
}
background-color:unquote($string:"#F00");//编译后background-color:#F00;
z-index:str-length("sass学习");//编译后z-index:6;
}

Math(数值函数)

数值函数处理数值计算，例如：percentage()将无单元的数值转换为百分比，round()将数字四舍五入为最接近的整数，min()和max()获取几个数字中最小值或最大值，random()返回一个随机数。

p{
z-index:abs($number:-15);//15
z-index:ceil(5.8);//6
z-index:max(5,2,9,7,4);//9
opacity:random();//随机0-1
}

List函数

List函数操作List，length()返回列表长度，nth()返回列表中的特定项，join()将两个列表连接在一起，append()在列表末尾添加一个值

p{
z-index:length(12px);//1
z-index:length(12px 5px 2px);//3
z-index:index(a b c d,c)//3
padding:append(10px 20px,30px)//10px 20px 30px
color:nth($list:red blue green,$n:2)//blue
}

4. 嵌套

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

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

5. Imports

@import '文件路径'

imports允许将总的样式分割成小文件，并在另一个文件中导入。

可以使用@imports指令导入.scss文件

@import "grids.scss";
//或者都可以不加后缀
@import "grids";

6. 扩展和占位符

@extend指令允许一个选择器继承另一个选择器

在一个选择器里使用@extend .xx 即可继承类名为xx定义的样式属性

.input {
  border-radius: 3px;
  border: 4px solid #ddd;
  color: #555;
  font-size: 17px;
  padding: 10px 20px;
  display: inline-block;
  outline: 0;
}
.error-input {
  @extend .input;
  border:4px solid #e74c3c;
}

.error-input中就包含了.input中的所有样式

7. 混合宏mixin

@mixin xx{}定义的一系列样式

可以通过@include xx在需要用到的样式里直接使用

@mixin block{
width:90%;
margin-left:5%;
border-radius:8px;
border:1px #ccc solid;
}
.container{
@include block;
}

//编译后
.container{
width:90%;
margin-left:5%;
border-radius:8px;
border:1px #ccc solid;
}

可以定义入参 @mixin xx(){}

@mixin block-padding($top,$right,$bottom,$left){
padding-top:$top;
padding-right:$right;
padding-bottom:$bottom;
padding-left:$left;
}
//给参数指定默认值
//@mixin block-padding($top:0,$right:0,$bottom:0,$left:0){
//padding-top:$top;
//padding-right:$right;
//padding-bottom:$bottom;
//padding-left:$left;
//}
.container{
@include block-padding(10px,20px,30px,40px);
//指定参数传递，不用按顺序
//@include block-padding($right:20px,$left:40px,$top:10px,$bottom:30px)
//参数指定默认值的情况下 可以不用传所有参数
//@include block-padding($right:20px,$left:40px)
}
//编译后
.container{
padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:40px;
}