CSS预处理器
1.基于CSS的另一种语言
2.通过工具编译成CSS
3.添加了很多CSS不具备的特性
4.能提升CSS文件的组织
提供功能：1.嵌套 反映层级和约束 2.变量和计算，减少重复戴拿 3.Extend 和 Mixin 代码片段
4.循环 适用于复杂有规律的样式 5.import CSS 文件模块化
知识点：
1.less（嵌套）
body{ padding:0; margin:0;}.wrapper{ background:white; .nav{ font-size: 12px; } .content{ font-size: 14px; &:hover{ background:red; } }}2.sass 嵌套
body { padding: 0; margin: 0;}.wrapper { background: white;}.wrapper .nav { font-size: 12px;}.wrapper .content { font-size: 14px;}.wrapper .content:hover { background: red;}3.less 变量
@fontSize: 12px;@bgColor: red;body{ padding:0; margin:0;}.wrapper{ background:lighten(@bgColor, 40%); .nav{ font-size: @fontSize; } .content{ font-size: @fontSize + 2px; &:hover{ background:@bgColor; } }}需要改动变量时，只需改动变量的值然后编译成 css 文件即可,一次定义，多次使用，方便维护
4.sass 变量
$fontSize: 12px;$bgColor: red;body{ padding:0; margin:0;}.wrapper{ background:lighten($bgColor, 40%); .nav{ font-size: $fontSize; } .content{ font-size: $fontSize + 2px; &:hover{ background:red; } }}sass 和 css 不兼容，尽量避免混淆，@在css 中是有意义的，故使用 $.
5.less mixin
有一段代码想公共使用（复用）的情况下：
@fontSize: 12px;@bgColor: red;.box{ color:green;}.box1{ .box(); line-height: 2em;}.box2{ .box(); line-height: 3em;}.block(@fontSize){ font-size: @fontSize; border: 1px solid #ccc; border-radius: 4px;}body{ padding:0; margin:0;}.wrapper{ background:lighten(@bgColor, 40%); .nav{ .block(@fontSize); } .content{ .block(@fontSize + 2px); &:hover{ background:red; } }}编译成css
.box { color: green;}.box1 { color: green; line-height: 2em;}.box2 { color: green; line-height: 3em;}body { padding: 0; margin: 0;}.wrapper { background: #ffcccc;}.wrapper .nav { font-size: 12px; border: 1px solid #ccc; border-radius: 4px;}.wrapper .content { font-size: 14px; border: 1px solid #ccc; border-radius: 4px;}.wrapper .content:hover { background: red;}6. sass mixin
$fontSize: 12px;$bgColor: red;@mixin block($fontSize){ font-size: $fontSize; border: 1px solid #ccc; border-radius: 4px;}body{ padding:0; margin:0;}.wrapper{ background:lighten($bgColor, 40%); .nav{ @include block($fontSize); } .content{ @include block($fontSize + 2px); &:hover{ background:red; } }}与 less 不同点：1. less 需要 @mixin 2.参数名称不一样 3.不需要class，直接指定其名字
编译成 css
body { padding: 0; margin: 0;}.wrapper { background: #ffcccc;}.wrapper .nav { font-size: 12px; border: 1px solid #ccc; border-radius: 4px;}.wrapper .content { font-size: 14px; border: 1px solid #ccc; border-radius: 4px;}.wrapper .content:hover { background: red;}
7.less extend
解决重复代码问题，减少 css 体积
@fontSize: 12px;@bgColor: red;.block{ font-size: @fontSize; border: 1px solid #ccc; border-radius: 4px;}body{ padding:0; margin:0;}.wrapper{ background:lighten(@bgColor, 40%); .nav:extend(.block){ color: #333; } .content{ &:extend(.block); &:hover{ background:red; } }}mixin 是把代码直接复制过来，extend 是把选择器提取出来，把公共样式写到一起
编译成 css
.block,.wrapper .nav,.wrapper .content { font-size: 12px; border: 1px solid #ccc; border-radius: 4px;}body { padding: 0; margin: 0;}.wrapper { background: #ffcccc;}.wrapper .nav { color: #333;}.wrapper .content:hover { background: red;}8. sass extend
$fontSize: 12px;$bgColor: red;.block{ font-size: $fontSize; border: 1px solid #ccc; border-radius: 4px;}body{ padding:0; margin:0;}.wrapper{ background:lighten($bgColor, 40%); .nav{ @extend .block; color: #333; } .content{ @extend .block; &:hover{ background:red; } }}编译成 css
.block, .wrapper .nav, .wrapper .content { font-size: 12px; border: 1px solid #ccc; border-radius: 4px;}body { padding: 0; margin: 0;}.wrapper { background: #ffcccc;}.wrapper .nav { color: #333;}.wrapper .content:hover { background: red;}sass 中 div 没有换行，其余再无区别，在样式表中就可以完全完成样式变更的操作，更加集中地维护代码
9.less loop (循环）
高度有规律的情况（网格） 采用递归，出口就是 n <= 0 时，跳出循环
.gen-col(@n) when (@n > 0){ .gen-col(@n - 1); .col-@{n}{ width: 1000px/12*@n; }}.gen-col(12);编译成 css
.col-12 { width: 1000px;}.col-11 { width: 916.66666667px;}.col-10 { width: 833.33333333px;}.col-9 { width: 750px;}.col-8 { width: 666.66666667px;}.col-7 { width: 583.33333333px;}.col-6 { width: 500px;}.col-5 { width: 416.66666667px;}.col-4 { width: 333.33333333px;}.col-3 { width: 250px;}.col-2 { width: 166.66666667px;}.col-1 { width: 83.33333333px;}10. sass loop
@mixin gen-col($n){ @if $n > 0 { @include gen-col($n - 1); .col-#{$n}{ width: 1000px/12*$n; } } } @include gen-col(12);这是类比上面 less 的写法，但 sass 还有更简便的写法，因为 sass 支持 for,故
@for $i from 1 through 12 { .col-#{$i} { width: 1000px/12*$i; }}编译成 css
.col-1 { width: 83.33333px;}.col-2 { width: 166.66667px;}.col-3 { width: 250px;}.col-4 { width: 333.33333px;}.col-5 { width: 416.66667px;}.col-6 { width: 500px;}.col-7 { width: 583.33333px;}.col-8 { width: 666.66667px;}.col-9 { width: 750px;}.col-10 { width: 833.33333px;}.col-11 { width: 916.66667px;}.col-12 { width: 1000px;}11. less import
解决 css 模块化 问题
6-import-variable
@themeColor: blue;@fontSize: 14px;6-import-module1
.module1{ .box{ font-size:@fontSize + 2px; color:@themeColor; } .tips{ font-size:@fontSize; color:lighten(@themeColor, 40%); }}6-import-module2
.module2{ .box{ font-size:@fontSize + 4px; color:@themeColor; } .tips{ font-size:@fontSize + 2px; color:lighten(@themeColor, 20%); }}less import（可以跨文件使用）
@import "./6-import-variable";@import "./6-import-module1";@import "./6-import-module2";编译成 css
.module1 .box { font-size: 16px; color: blue;}.module1 .tips { font-size: 14px; color: #ccccff;}.module2 .box { font-size: 18px; color: blue;}.module2 .tips { font-size: 16px; color: #6666ff;}12.sass import
6-import-variable
$themeColor: blue;$fontSize: 14px;6-import-module1
.module1{ .box{ font-size:$fontSize + 2px; color:$themeColor; } .tips{ font-size:$fontSize; color:lighten($themeColor, 40%); }}6-import-module2
.module2{ .box{ font-size:$fontSize + 4px; color:$themeColor; } .tips{ font-size:$fontSize + 2px; color:lighten($themeColor, 20%); }}sass import（可以跨文件使用）
@import "./6-import-variable";@import "./6-import-module1";@import "./6-import-module2";编译成 css
.module1 .box { font-size: 16px; color: blue;}.module1 .tips { font-size: 14px; color: #ccccff;}.module2 .box { font-size: 18px; color: blue;}.module2 .tips { font-size: 16px; color: #6666ff;}继续阅读与本文标签相同的文章
上一篇 :
CSS动画小结
下一篇 :
Bootstrap 小结
-
Java 学习（18）--列表（List）/ 集合 （Set）/ 泛型 / Map
2026-05-26栏目： 教程
-
Java 学习（19）--集合（collection）/ 学生管理系统
2026-05-26栏目： 教程
-
初识 Vue（04）---(组件化改造TodoList)
2026-05-26栏目： 教程
-
初识 Vue(03)---(MVVM 设计模式)
2026-05-26栏目： 教程
-
Java学习（17）--正则表达式
2026-05-26栏目： 教程