what ?
Why ?
新的功能
变量
- sass
$font-size: 16px;
div {
font-size: $font-size;
}
- less
@font-size: 16px;
div {
font-size: @font-size;
}
- stylus
font-size = 16px;
div
font-size: font-size
- css
div {
font-size: 16px;
}
嵌套 (最喜欢的功能点之一)
- sass
$link-color: #999;
$link-hover: #229ed3;
ul {
margin: 0;
li {
float: left;
}
a {
color: $link-color;
}
}
- css
ul { margin: 0; }
ul li { float: left; }
ul a { color: #999; }
ul a:hover { color: #229ed3; }
Mixins(混合)
- sass
@mixin bordered($width) {
border: $width solid #ddd;
$: hover {
border-color: #999;
}
}
h1 {
@include bordered(5px);
}
- less
.bordered (@width) {
border: @width solid #ddd;
&:hover {
border-color: #999;
}
}
h1 {
.bordered(5px);
}
- stylus
bordered(w)
border: n solid #ddd
&:hover
border-color: #999
h1
bordered(5px)
- css
h1 { border: 5px solid #ddd; }
h1:hover { border-color: #999; }
扩展
颜色操作
If/Else 声明
- sass
@if lightness($color) > 30% {
background-color: black;
}
@else {
background-color: white;
}
- less
.mixin (@color) when (lightness(@color) > 30%) {
background-color: black;
}
.mixin (@color) when (lightness(@color) =<; 30%) {
background-color: white;
}
- stylus
if lightness(color) > 30%
background-color black
else
background-color white
循环
- sass
@for $i from 1px to 3px {
.border-#{i} {
border: $i solid blue;
}
}
- less
.loop(@counter) when (@counter > 0){
.loop((@counter - 1));
.border-@{counter} {
border: 1px * @counter solid blue;
}
}
- stylus
for num in (1..3)
.border-{num}
border 1px * num solid blue
函数
1cm * 1em => 1 cm * em
2in * 3in => 6in
(1cm / 1em) * 4em => 4cm
2in + 3cm + 2pc => 5.181in
3in / 2in => 1.5in
Imports
结论
这里的三种CSS预处理器都或多或少有相似的特性。根据你的代码习惯选择一种吧。
参考文献：
https://htmlmag.com/article/an-introduction-to-css-preprocessors-sass-less-stylus