想要查看关于 CSS 的相关面试题，请移步至面试题 - CSS 篇查看，其他内容面试题请移步至 2021 最新最全的前端面试题集锦查看。

CSS-当前主流的三种预编译器

什么是预编译器：

CSS预编译器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用；

优点：

可以让我们的CSS代码更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

当前主流的三种预编译器：

Sass
Less
Stylus

比较：

比较一：基本语法

首先 Sass 和 Less 都使用的是标准的 CSS 语法，因此如果可以很方便的将已有的 CSS 代码转为预处理器代码。默认 Sass 使用 .sass 扩展名，而 Less 使用 .less 扩展名。
```
/* style.scss or style.less */
h1 {color: #666666;
}
/* 但是，Sass同时也支持老的语法，就是不包含花括号和分号的方式： */
h1color: #666666;
```
而 Stylus 支持的语法要更多样性一点，它默认使用 .styl 的文件扩展名，它可以既没有花括号也没用分号。下面是 Stylus 支持的语法：
```
/* style.styl */
h1 {color: #666666;
}/* 省略括号 */
h1color: #666666;/* 省略冒号和分号 */
h1color: #666666
```
- 可以在同一个样式单中使用不同的变量，例如下面的写法也不会报错：
```
h1 {color #0982c1
}
h2font-size: 1.2em
```

比较二：变量

Sass 声明变量必须是 $ 开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号 : 分隔开。
- Sass 让人们受益的一个重要特性就是它为 css 引入了变量。你可以把反复使用的 css 属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。
```
$maincolor : #666666;
$siteWidth : 1024px;
$borderStyle : dotted;
body {color: $maincolor;border: 1px $borderStyle $mainColor;max-width: $siteWidth;
}
```
Less 声明变量用 @ 开头，其余等同 Sass。
- 在 Less 文件中，当一个值需要反复使用时，可以通过 @ 符号定义变量。已经被赋值的变量以及其他的常量（如像素、颜色等）都可以参与运算。
```
@maincolor : #666666;
@siteWidth : 1024px;
@borderStyle : dotted;
body {color: @maincolor;border: 1px @borderStyle @mainColor;max-width: @siteWidth;
}
```
Stylus 中声明变量没有任何限定，结尾的分号可有可无，但变量名和变量值之间必须要有 =。
- Stylus 对变量是没有任何设定的，可以是以 $ 开头，或者任何的字符，而且与变量之间可以用冒号，空格隔开，但是在 Stylus 中不能用 @ 开头，例如：
```
maincolor = #666666
siteWidth = 1024px
borderStyle = dotted
body color maincolorborder 1px borderStyle mainColormax-width siteWidth
```

以上三种写法等同于：

body {color: #092873;border: 1px dotted #092873;max-width: 1024px;
}

比较三：嵌套

如下代码，大家肯定经常用到或者很常见：

div {margin: 10px;
}
div nav {height: 25px;
}
div nav a {color: #ffffff;
}
div nav a:hover {text-decoration: underline;
}

如果用 CSS 预处理器，就可以少写很多单词，而且父子节点关系一目了然，并且sass，Less，stylus都支持下面这样的写法，且都是相同的：
```
nav { ul { margin: 0; padding: 0; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; }
}
```

比较四：运算符

在 CSS 预处理器中还是可以进行样式的计算如下：
```
body {margin: (14px/2);top: 50px + 100px;right: 80 * 10%;
}
```

比较五：颜色处理函数

CSS 预处理器一般都会内置一些颜色处理函数用来对颜色值进行处理，例如加亮、变暗、颜色梯度等。

Sass

Sass 的颜色处理函数：

lighten($color, 10%);
darken($color, 10%);
saturate($color, 10%);
desaturate($color, 10%);
grayscale($color);
complement($color);
invert($color);
mix($color1, $color2, 50%);

$color: #0982C1;
h1 {background: $color;border: 3px solid darken($color, 50%);
}

Less

Less 的颜色处理函数：
用 @ ，其余同 Sass

@color: #0982C1;
h1 {background: @color;border: 3px solid darken(@color, 50%);
}

Stylus

Stylus颜色处理函数：

lighten(color, 10%);
darken(color, 10%);
saturate(color, 10%);
desaturate(color, 10%);

color = #0982C1
h1background colorborder 3px solid darken(color, 50%)

比较六：继承

Sass
Sass可通过 @extend 来实现代码组合声明，使代码更加优越简洁。

.message {border: 1px solid #ccc;padding: 10px;color: #333;
}
.success {@extend .message;border-color: green;
}
.error {@extend .message;border-color: red;
}
.warning {@extend .message;border-color: yellow;
}

Less

.message {border: 1px solid #ccc;padding: 10px;color: #333;
}
.success {.message;border-color: green;
}
.error {.message;border-color: red;
}
.warning {.message;border-color: yellow;
}

以上两种写法等同于：

.message, .success, .error, .warning {border: 1px solid #cccccc;padding: 10px;color: #333;
}
.success {border-color: green;
}
.error {border-color: red;
}
.warning {border-color: yellow;
}

比较七：Mixins（混入）

Mixins 有点像是函数或者是宏，当某段 CSS 经常需要在多个元素中使用时，可以为这些共用的 CSS 定义一个 Mixin，然后只需要在需要引用这些 CSS 地方调用该 Mixin 即可。

可以理解成：定义了一个公用的方法，传入不同的参数去调用这个方法。

Sass

/* logo 高度 */
@value logoHeight: 160px;/* logo的样式 logo（$x:2px）,也可以有默认参数 */
@mixin logo($x, $y, $width, $height, $logoHeight) {display: inline-flex;height: $logoHeight;width: 100%;justify-content: center;align-items: flex-end;background: url('../assets/basic/logo.png') no-repeat;background-position: $x $y;background-size: $width $height;color: #fff;font-size: 22px;font-weight: 600;transition: background 0.2s, width 0.2s, height 0.2s;
}/* 在引用的地方@include logo() */
.logo {@include logo(19px, 22px, 120px, 120px, logoHeight);
}

Less

.error(@borderWidth: 2px) {border: @borderWidth solid #F00;color: #F00;
}
.generic-error {padding: 20px;margin: 4px;.error(); /* 这里调用默认 border: 2px solid #F00; */
}
.login-error {left: 12px;position: absolute;top: 20px;.error(5px); /* 这里调用 border:5px solid #F00; */
}

Stylus
与 Less 的区别是，引用的时候，可以不用加 (.)

error(borderWidth= 2px) {border: borderWidth solid #F00;color: #F00;
}
.generic-error {padding: 20px;margin: 4px;error();
}
.login-error {left: 12px;position: absolute;top: 20px;error(5px);
}

比较八：3D文本

要生成具有 3D 效果的文本可以使用 text-shadows ，唯一的问题就是当要修改颜色的时候就非常的麻烦，而通过 mixin 和颜色函数可以很轻松的实现：

用法跟 mixin 的用法一致

Sass

@mixin text3d($color) {color: $color;text-shadow: 1px 1px 0px darken($color, 5%),2px 2px 0px darken($color, 10%),3px 3px 0px darken($color, 15%),4px 4px 0px darken($color, 20%),4px 4px 2px #000;
}h1 {font-size: 32pt;@ include text3d(#0982c1);
}

Less

.text3d(@color) {color: @color;text-shadow: 1px 1px 0px darken(@color, 5%),2px 2px 0px darken(@color, 10%),3px 3px 0px darken(@color, 15%),4px 4px 0px darken(@color, 20%),4px 4px 2px #000;
}span {font-size: 32pt;.text3d(#0982c1);
}

Stylus

text3d(color)color: colortext-shadow: 1px 1px 0px darken(color, 5%), 2px 2px 0px darken(color, 10%), 3px 3px 0px darken(color, 15%), 4px 4px 0px darken(color, 20%), 4px 4px 2px #000
spanfont-size: 32pttext3d(#0982c1)

其生成的 css 最终的效果如下：

span {font-size: 32pt;color: #0982c1;text-shadow: 1px 1px 0px #097bb7,2px 2px 0px #0875ae,3px 3px 0px #086fa4,4px 4px 0px #07689a,4px 4px 2px #000;
}

比较九：支持条件语句

在 Sass 中，还支持条件语句：

@if 可一个条件单独使用，也可以和 @else 结合多条件使用

$lte7: true;
$type: monster;
.ib{display:inline-block;@if $lte7 {*display:inline;*zoom:1;}
}
p {@if $type == ocean {color: blue;} @else if $type == matador {color: red;} @else if $type == monster {color: green;} @else {color: black;}
}

其最终的 css 代码如下：

.ib{display:inline-block;*display:inline;*zoom:1;
}
p {color: green;
}

另外，Sass 还支持 for ，each 等其他用法，感兴趣的小伙伴自己上官网see see吧。

官网链接：

Sass：https://www.sass.hk/
Less：http://lesscss.cn/
Stylus：http://stylus-lang.com/

希望以上内容对你的学习面试有所帮助，最后不要忘记一键三连哦~

少年加油！

【面试总结系列】CSS 预编译器 Sass、Less、Stylus 三者之间的比较详解相关推荐

css预处理器 sass和stylus对比以及常用功能
在众多的css预处理器语言中,sass和stylus算是十分优秀的两个.本文主要针对两者的常用功能做个简单的对比分析.在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言. 本文涉及到的sa ...
CSS预处理器sass和less
文章目录 CSS预处理器什么是CSS预处理器 Sass和LESS背景介绍 Sass背景介绍 LESS的背景介绍 Sass 安装Sass 下载Ruby安装文件安装Ruby 安装Sass 编译Sass ...
【备战春招/秋招系列】美团Java面经总结进阶篇（附详解答案）
 一消息队列MQ的套路 1.1 介绍一下消息队列MQ的应用场景/使用消息队列的好处 ①.通过异步处理提高系统性能 ②.降低系统耦合性 1.2 那么 ...
C 编译器、链接器、加载器详解
原文请见 C 编译器.链接器.加载器详解 0. 预编译在编译 C++ 程序的预处理阶段,源程序中的所有常量表达式都需要首先计算并替换为对应的具体数值. C语言编译器在对源代码编译之前,还需要进一步的 ...
【备战春招/秋招系列】美团Java面经总结终结篇（附详解答案）
该文已加入开源项目:JavaGuide(一份涵盖大部分Java程序员所需要掌握的核心知识的文档类项目,Star 数接近 14 k).地址:https://github.com/Snailclimb.. ...
（转）C#进阶系列——WebApi 接口返回值不困惑：返回值类型详解
原文链接:https://www.cnblogs.com/landeanfen/p/5501487.html 阅读目录一.void无返回值二.IHttpActionResult 1.Json(T ...
【备战春招/秋招系列】美团Java面经总结终结篇（附详解答案） 1
该文已加入开源项目:JavaGuide(一份涵盖大部分Java程序员所需要掌握的核心知识的文档类项目,Star 数接近 14 k).地址:https://github.com/Snailclimb/J ...
【5年Android从零复盘系列之二十】Android自定义View(15)：Matrix详解(图文)【转载】
[转载]本文转载自麻花儿wt 的文章<android matrix 最全方法详解与进阶(完整篇)> [5年Android从零复盘系列之二十]Android自定义View(15):Matri ...
CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】
一.px(像素) [绝对单位,页面按精确像素展示] px就是pixel(像素)的缩写,相对长度单位,相对于屏幕分辨率. px表示像素 (计算机屏幕上的一个点:1px = 1/96in),是绝对单位,不 ...

【面试总结系列】CSS 预编译器 Sass、Less、Stylus 三者之间的比较详解

CSS-当前主流的三种预编译器

什么是预编译器：

优点：

当前主流的三种预编译器：

比较：

比较一：基本语法

比较二：变量

比较三：嵌套

比较四：运算符

比较五：颜色处理函数

比较六：继承

比较七：Mixins（混入）

比较八：3D文本

比较九：支持条件语句

官网链接：

【面试总结系列】CSS 预编译器 Sass、Less、Stylus 三者之间的比较详解相关推荐

最新文章

热门文章