阿里网站建设视频教程公众号开发 订阅号

css预编译？

css预编译器用一种专门的编程语言，它可以对web页面样式然后再编译成正常css文件，可以更加方便和高效的编写css代表。主要作用就是为css提供了变量，函数，嵌套，继承，混合等功能，以及更加易于维护和组织代码的结构。

常见的css预编译语言有：sass,less和stylus等等

区别：

• 变量定义方式不同：sass使用$符号定义变量，less使用@符号，stylus则直接使用变量名
• 语法不同：sass和less类似于css语法规则，而stylus则使用更加简洁和灵活的缩进语法
• 编译方式不同：sass和less需要通过编译器进行编译，可以将编译的代码转换成标准的css代码，而stylus则可以直接在浏览器中进行解析和执行。可以动态调整样式和布局。
• 操作符和函数库不同：sass和less支持常见的操作符和函数库，而stylus的函数库更加强大，支持更多的特性和功能。

详解：

sass（Syntactically Awesome Stylesheets）是2007年出现的，也是我们最制造最成熟的css预处理器，sass默认使用.sass为扩展名。

现在的sass的规则：一个是使用缩进作为分隔符来区分代码块；另一个为嵌套规则和css一样采用了大括号作为分隔符。后一个语法规则我们又称为scss，在sass3之后的版本都致辞这种语法了

less是2009年出现的它受sass的影响但是又实用css语法，让我们的开发人员比较容易上手

优点是简单和兼容css但是也影响了sass变化为scss的，less默认使用.less扩展名。

stylus是2010年出现的来自Node.js社区，主要是用来给node项目进行css预处理的支持的。

Stylus 是一种基于 Node.js 的 CSS 预处理器，它的语法非常灵活和简洁。Stylus 使用缩进来表示块级元素，不需要使用花括号或分号，同时支持变量、嵌套规则、混合、函数等特性。Stylus 的目标是使得样式表的编写尽可能简洁和优雅。Stylus 的文件扩展名为 .styl