css表达式的缺点,CSS 预处理器 sass,less,stylus优缺点

CSS 预处理器

基本语法

Less 的基本语法属于「CSS 风格」

Sass、Stylus 相比之下激进一些，利用缩进、空格和换行来减少需要输入的字符

不过区别在于 Sass、Stylus 同时也兼容「CSS 风格」代码

Less & SCSS：

.box {

display: block;

}

Sass：

.box

display: block

Stylus：

.box

display: block

注：后面的 Sass 代码会用被更多人接受的 SCSS 风格给出

嵌套语法

三者的嵌套语法都是一致的，甚至连引用父级选择器的标记 & 也相同。

区别只是 Sass 和 Stylus 可以用没有大括号的方式书写

less

.a {

&.b {

color: red;

}

}

变量

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

Less：

@red: #c00;

strong {

color: @red;

}

Sass：

$red: #c00;

strong {

color: $red;

}

Stylus：

red = #c00

strong

color: red

@import

Less 中可以在字符串中进行插值：

@device: mobile;

@import "styles.@{device}.css";

Sass 中只能在使用 url() 表达式引入时进行变量插值：

$device: mobile;

@import url(styles.#{$device}.css);

Stylus 中在这里插值不管用，但是可以利用其字符串拼接的功能实现：

device = "mobile"

@import "styles." + device + ".css"

混入

混入(mixin)应该说是预处理器最精髓的功能之一了。

它提供了 CSS 缺失的最关键的东西：样式层面的抽象。

Less 的混入有两种方式：

1.直接在目标位置混入另一个类样式(输出已经确定，无法使用参数)；

2.定义一个不输出的样式片段(可以输入参数)，在目标位置输出。

.alert {

font-weight: 700;

}

.highlight(@color: red) {

font-size: 1.2em;

color: @color;

}

.heads-up {

.alert;

.highlight(red);

}

编译后

.alert {

font-weight: 700;

}

.heads-up {

font-weight: 700;

font-size: 1.2em;

color: red;

}

Sass

@mixin large-text {

font: {

family: Arial;

size: 20px;

weight: bold;

}

color: #ff0000;

}

.page-title {

@include large-text;

padding: 4px;

margin-top: 10px;

}

继承

Stylus,Scss

.message

padding: 10px

border: 1px solid #eee

.warning

@extend .message

color: #e2e21e

less

.message {

padding: 10px;

border: 1px solid #eee;

}

.warning {

&:extend(.message);

color: #e2e21e;

}

Sass

.active {

color: red;

}

button.active {

@extend .active;

}

函数

三种预处理器都自带了诸如色彩处理、类型判断、数值计算等内置函数

stylus

@function golden-ratio($n) {

@return $n * 0.618;

}

.golden-box {

width: 200px;

height: golden-ratio(200px);

}

总结

Less 从语言特性的设计到功能的健壮程度和另外两者相比都有一些缺陷，但用 Less 可以满足大多数场景的需求。

但相比另外两者，基于 Less 开发类库会复杂得多，实现的代码会比较脏，能实现的功能也会受到 DSL 的制约。

比 Stylus 语义更清晰、比 Sass 更接近 CSS 语法，使得刚刚转用 CSS 预编译的开发者能够更平滑地进行切换。

Sass 在三者之中历史最久，也吸收了其他两者的一些优点。

从功能上来说 Sass 大而全，语义明晰但是代码很容易显得累赘。

主项目基于 Ruby 可能也是一部分人不选择它的理由(Less 开始也是基于 Ruby 开发，后来逐渐转到 less.js 项目中)。

Sass 有一个「事实标准」库——Compass，于是对于很多开发者而言省去了选择类库的烦恼，对于提升开发效率也有不小的帮助。

Stylus 的语法非常灵活，很多语义都是根据上下文隐含的。

基于 Stylus 可以写出非常简洁的代码，但对使用团队的开发素养要求也更高，更需要有良好的开发规范或约定。

总的来说，三种预处理器百分之七八十的功能是类似的。

Less 适合帮助团队更快地上手预处理代码的开发，而 Sass 和 Stylus 的差异更在于口味。

比如有的人喜欢 jQuery 用一个 $ 做大部分的事，而另一些人觉得不一样的功能就该有明确的语义上的差别。在这里我不会做具体的推荐。当然，再次声明一下由于我个人接触 Less 开发比较多，所以可能遇到的坑也多一些，文中没有列出 Sass 和 Stylus 的问题并不代表他们没有。