当前所在位置: 首页 > 儿童教育 > 正文

值得收藏css预处理器scss的使用总结

2023-02-01 餐饮美食网【字体：大中小】

本篇文章给大家带来了关于css处理器scss的知识，css预处理器：用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。希望对大家有帮助。

1. 为什么会出现css预处理器

–CSS不是一种编程语言，仅仅只能用来编写网站样式，在web初期时，网站的搭建还比较基础，所需要的样式往往也很简单。但是随着用户需求的增加以及网站技术的升级，css一成不变的写法也渐渐不再满足于项目。没有类似js这样的编程语言所有的变量，常量以及其他的编程语法，css的代码难免会显得臃肿以及难以维护。但是又没有css的替代品，于是css预处理器就作为css的扩展，出现在了前端技术中。

2.常见的css预处理器

–发展至今，CSS预处理器的技术已经相当成熟，也涌现出了很多中不同的CSS预处理器语言。目前主流的有三种：Sass(Scss), Less, Stylus。

3.CSS预处理器的方便之处

–以Sass为例

–Sass主要的功能有：允许定义变量，允许CSS代码嵌套，函数功能，Mixin，继承等。这些功能使得编写CSS更加贴合编程语言的习惯，使得CSS代码复用性更高，代码功能更加直观，也更加易于程序员的阅读与维护。

4. Sass预处理器

变量

Sass允许定义变量用于代码复用，使用 $ 进行变量定义。在有使用相同属性的代码块时，可以通过定义一个变量，将复用的属性储存到变量中。当需要统一修改某个属性值时，就无须在代码中挨个去找需要修改的属性，而是直接修改变量即可。

在公共组件药品说明书中，对组件的边框样式进行了单独设置。此样式也用于组件内部各部分分隔的边框。因此可以将样式存储到一个变量当中进行复用。

/deep/ .borderLayout.showBorder{
border: 1px solid #EBEEF5
}
/deep/.borderLayout > p.showBorder.left {
border-right: 1px solid #EBEEF5;
}

通过scss的嵌套规则可以修改为：

$border: 1px solid #EBEEF5
/deep/ .borderLayout.showBorder{
border: $border
}
/deep/.borderLayout > p.showBorder.left {
border-right: $border;
}

嵌套

–Sass允许代码嵌套，用于选择后代。相对于css原生的后代选择器，嵌套样式的代码，更加直观。

/deep/ .ant-anchor-link-active>.ant-anchor-link-title{
color:#303133
}

公共组件‘药品说明书’ 的css代码块，用于设置左侧导航栏被鼠标点击选中时，title的显示样式,

使用嵌套规则将代码进行嵌套之后：

/deep/ .ant-anchor-link-active{
 .ant-anchor-link-title{
   color:#303133
 }
}

嵌套之后的代码，更接近js一样的结构，而不再是一整行的选择器。更有利于观察出代码间的各种关系。

此外，scss的也可以实现属性嵌套以及伪元素嵌套，从而实现更加精简的代码

Mixin

在JavaScript等编程语言中，允许将需要复用的代码块编写成一个函数，在有需要的地方就调用这个表达式从而完成代码编写一次就可以完成多次复用的功能。scss的Mixin实现的也是类似的功能。但是Mixin的代码块不产生一个值。

定义Mixin代码块需要使用 @mixin ,调用一个已定义的Mixin代码块使用@include

依旧是以药品说明书这个组件的代码说明

/deep/ .borderLayout > p > .layoutCon {
   overflow: hidden;
   &:hover{ // 此处即为伪元素嵌套
       overflow: auto;
   }
}
.m-nav-bar{
   display: flex;
   flex-direction: column;
   overflow: auto;
   height:100%;
   overflow: hidden;
   &:hover{
       overflow: auto;
   }
}

组件中有两个选择器都出现了同一段css代码块，其作用是隐藏页面中的滚动条，当鼠标hover到所属区域时，滚动条显示。

隐藏滚动条的代码可以使用mixin单独定义出来，然后再调用。

@mixin hide-scroll{
 overflow: hidden;
   &:hover{
       overflow: auto;
   }
}

/deep/ .borderLayout > p > .layoutCon {
  @include hide-scroll;
}

.m-nav-bar{
		@include hide-scroll;
   display: flex;
   flex-direction: column;
   overflow: auto;
   height:100%;
}