谈谈css中的3种预处置器
一、介绍
CSS预处置器定义了一种新的说话，根本的思想是用一种专门的编程说话，开发者只需要使用这种说话停止编码工作，减少平淡无奇的CSS代码的编写历程的同时，它能让你的CSS具备愈加简约、顺应性更强、可读性愈加、层级关系愈加明显、更易于代码的保护等诸多好处。
css预处置器品种繁多，三种主流css预处置器是Less、Sass（Scss）及Stylus；它们各自的背景如下:
Sass：2007年产生，最早也是最成熟的CSS预处置器，具有ruby社区的支撑和compass这一最强大的css框架。
当前受LESS影响，已经进化到了全面兼容CSS的SCSS（SCSS 需要使用分号和花括号而不是换行和缩进）。
Less：2009年显现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区之外支撑者远超越SASS。
其缺陷是比起SASS来，可编程功效不足。
不外长处是简便和兼容CSS，反过来也影响了SASS演化到了SCSS的时代，闻名的Twitter Bootstrap就是采纳LESS做底层说话的。
Stylus：2010年发生，来自Node.js社区。
主要用来给Node项目停止CSS预处置支撑，在此社区之内有必然支撑者，在广泛的意义上人气还完全不如SASS和LESS。
二、比力
在使用 CSS 预处置器此前最重要的是懂得语法，荣幸的是根本上大多数预处置器的语法跟 CSS 都差不多。
第一 Sass 和 Less 都使用的是标准的 CSS 语法，因此假如可以很利便的将已有的 CSS 代码转为预处置器代码，默许 Sass 使用 .sass 扩展名，而 Less 使用 .less 扩展名。
h1 {
color: #0982C1;
}这是一个再一般不外的，不外 Sass 同时也支撑老的语法，就是不包括花括号和分号的方式：
h1 color: #0982c1
而 Stylus 支撑的语法要更多样性一点，它默许使用 .styl 的文件扩展名，下面是 Stylus 支撑的语法：
/* style.styl */
h1 {
color: #0982C1;
}
/* omit brackets */
h1
color: #0982C1;
/* omit colons and semi-colons */
h1
color #0982C1可以在统一个样式单中使用不一样的变量，例如下面的写法也不会报错：
h1 {
color #0982c1
}
h2
font-size: 1.2em相关引荐：
2020年前端vue面试题大汇总（附答案）
vue教程引荐：2020最新的5个vue.js视频教程精选
