CSS预处理器(less 和 sass)_css预处理器(如sass、less等)-优快云博客

本文链接：https://blog.youkuaiyun.com/jianghao233/article/details/80424394

本文介绍了CSS预处理器的概念，强调它们如何扩展CSS的功能，如嵌套、变量、计算、Extend和Mixin、循环以及导入。重点对比了Less和Sass在嵌套、变量、mixin、extend和循环等特性的使用，阐述了它们如何提升CSS的组织和维护效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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: $fon