上一篇：如何理解CSS文档流，有几种类型下一篇：如何利用CSS写简易的Loading动画

今天小编跟大家讲解下有关“常见的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%;
}