预处理？看这一篇就够了

最新推荐文章于 2025-08-22 15:07:29 发布

程序员云锦

最新推荐文章于 2025-08-22 15:07:29 发布

阅读量1.3k

点赞数 44

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/m0_61607810/article/details/121632759

本文介绍了CSS预处理器的概念和背景，以Sass为例展示了如何通过预处理器简化CSS代码编写，包括变量、运算、条件语句、嵌套、循环和代码重用等特性。此外，还提到了其他代表性的预处理器如Less和Stylus，并提供了学习Sass前的准备工作，包括VSCode插件配置和基本语法示例。

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

文章目录

背景

CSS 自诞生以来，基本语法和核心机制一直没有本质上的变化，在很长一段时间内，它的发展几乎全是表现力层面上的提升。

最开始 CSS 在网页中的作用只是辅助性的装饰，轻便易学是最大的需求；然而如今网站的复杂度已经不可同日而语，原生 CSS 已经让开发者力不从心。

当一门语言的能力不足而用户的运行环境又不支持其它选择的时候，这门语言就会沦为 “编译目标” 语言。开发者将选择另一门更高级的语言来进行开发，然后编译到底层语言以便实际运行。于是，在前端领域，天降大任于斯人也，CSS 预处理器应运而生。

概念

CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成 CSS 的程序。简而言之，最终还是生成CSS代码，但是会让我们书写CSS代码更加方便快速

光看概念还是理解不了，举个栗子
假设现在有这样一个需求摆在我们面前：画一个太阳，画一个太阳肯定不难啊，打开编译器新建文件，开始画太阳

<body>
	<div class="sun">
	</div>
</body>

太阳应该是一个圆的红的物体，并且周围有光芒，要表示光芒这里就用有颜色的条来代替吧，用光条把太阳围一圈就算是光芒了

<body>
	<div class="sun">
		<div class="sun-body">
		</div>
		<div class="sun-light"></div>
	    <div class="sun-light"></div>
	    <div class="sun-light"></div>
	    <div class="sun-light"></div>
	    <div class="sun-light"></div>
	    <div class="sun-light"></div>
	    <div class="sun-light"></div>
	    <div class="sun-light"></div>
	    <div class="sun-light"></div>
	    <div class="sun-light"></div>
	    <div class="sun-light"></div>
	    <div class="sun-light"></div>
	    <div class="sun-light"></div>
	    <div class="sun-light"></div>
	</div>
</body>

然后给它加上样式

<style>
	 * {
     
     
	      margin: 0;
	      padding: 0;
	}

    body {
     
     
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      height: 100vh;
      background-color: #f1f1f1;
    }

    .sun {
     
     
      position: relative;
    }

    .sun-body