css预编译有哪些

css预编译有：1. LESS；2. SASS；3. Stylus。其中，LESS受SASS的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，优点是简单和兼容CSS，Less默认使用.Less扩展名。

一、css预编译

1. LESS

受SASS的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，比起SASS来，编程功能不够，优点是简单和兼容CSS，Less默认使用.Less扩展名。

变量无疑为 Css 增加了一种有效的复用方式，减少了原来在 Css 中无法避免的重复「硬编码」

less声明的变量必须以@开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号:分隔开

2. SASS

SASS是非常成熟的CSS预处理器，现在的Sass有两套语法规则：

一个依旧是用缩进作为分隔符来区分代码块的，默认使用 .sass扩展名；

另一套规则和CSS一样采用了大括号｛｝作为分隔符。又名SCSS,SCSS默认使用 .scss扩展名。

3. Stylus

Stylus是一个Css的预处理框架，2010 年产生，来自 Node.js社区，主要用来给 Node 项目进行 Css 预处理支持

所以Stylus 是一种新型语言，可以创建健壮的、动态的、富有表现力的Css。比较年轻，其本质上做的事情与SASS/LESS等类似。

延伸阅读：

二、css介绍

Css 作为一门标记性语言，语法相对简单，对使用者的要求较低，但同时也带来一些问题。需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 Css 编写经验而很难写出组织良好且易于维护的 Css 代码。Css预处理器便是针对上述问题的解决方案

预处理语言扩充了 Css 语言，增加了诸如变量、混合（mixin）、函数等功能，让 Css 更易维护、方便。本质上，预处理是Css的超集包含一套自定义的语法及一个解析器，根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 Css 文件。

以上就是关于css预编译的内容希望对大家有帮助。