目录

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预编译的内容希望对大家有帮助。

一站式研发项目管理平台 PingCode

一站式研发项目管理平台 PingCode

支持敏捷\瀑布、知识库、迭代计划&跟踪、需求、缺陷、测试管理,同时满足非研发团队的流程规划、项目管理和在线办公需要。