有关CSS预处理器的比较选择(Sass&Less&Stylus)

最新推荐文章于 2024-06-28 03:56:11 发布

Sams-ara

最新推荐文章于 2024-06-28 03:56:11 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： css 处理器浏览器

本文链接：https://blog.youkuaiyun.com/jingege0318/article/details/74128663

js 专栏收录该内容

7 篇文章

订阅专栏

本文对比了CSS预处理器Sass, Less和Stylus，包括它们的语法、变量、Mixins、嵌套、继承、颜色函数、条件语句和循环语句。Sass在特性上占优，LESS便于CSS过渡，Stylus功能强大且与JavaScript紧密相连。Stylus的简洁性和强大功能使其成为作者的选择。" 104649617,1255131,Android UI绘制：View添加到屏幕窗口的全过程解析,"['Android开发', 'UI框架', '布局管理']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处.

LESS & Sass

LESS是受Sass启发而开发的工具，它列出了如下开发的理由：“为什么要开发一个Sass的替代品呢？原因很简单：首先是语法。Sass的一个关键特性是缩进式的语法，这种语法可以产生柱式外观的代码。但是你需要花费时间学习一门新的语法以及重新构建你现在的样式表。
LESS给CSS带来了很多特性，使得LESS能够和CSS无缝地紧密结合在一起。因此，你可以平滑地由CSS迁移到LESS，如果你只是对使用变量或者操作感兴趣的话，你不需要学习一整门全新的语言。”

Stylus

Stylus相对前两者较新，可以看官方文档介绍的功能。

来自NodeJS社区，所以和NodeJS走得很近，与JavaScript联系非常紧密。还有专门JavaScript API：http://learnboost.github.io/stylus/docs/js.html
支持Ruby之类等等框架
更多更强大的支持和功能

总结：Sass看起来在提供的特性上占有优势，但是LESS能够让开发者平滑地从现存CSS文件过渡到LESS，而不需要像Sass那样需要将CSS文件转换成Sass格式。Stylus功能上更为强壮，和js联系更加紧密。

语法

默认Sass使用“.scss”扩展名。Sass语法规则可以像CSS那样书写：

h1 {
    color: #936;
    background-olor: #333
}

LESS和Sass一样，都是使用CSS的标准语法，只是LESS的源文件的扩展名是“.less”，其基本语法类似于:

h1 {
    color: #936;
    background-olor: #333
}

Stylus的语法花样多一些，它的文件扩展名是“.styl”，Stylus也接受标准的CSS语法，但是他也像Sass老的语法规则，使用缩进控制，同时Stylus也接受不带大括号（｛｝）和分号的语法，如下所示：

h1 {
  color: #963;
  background-color:#333;
}
/*省略大括号（｛｝）*/
h1 
  color: #963;
  background-color: #333;
/*省略大括号（｛｝）和分号（;）*/
h1
  color #963
  background-color #333

变量

变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。
Sass使用$符号来标识变量：

$nav-color: #F90;
nav {
    $width: 100px;
    width: $width
    color: $nav-color;
}

Less使用@符号来定义标识变量:

@nav-color: #F90
nav {
    @width: 100px;
    width: @width;
    color: @nav-color
}

Stylus变量定义相对没有特殊符号:

nav-color = #F90
nav 
    width 100px
    color nav-color

三种预处理器编译后的结果为：

nav{
    width: 100px;
    color: #F90;
}

值得注意的是Stylus还有一个属性查找功能，不需分配变量就可以调用内部属性值：

nav
    width 100px
    height (@width / 2)
    color #F90

Mixins

Sass中混合器使用@mixin标识符定义，通过@include使用混合器。混合器传参方式和PHP有点像：

@mixin rounded-corner($radius, $hover: red) {
    -moz-boeder-radius: $radius;
    -webkit-border-radius: $radius;
    border-radius: $radius;
    &:hover {
        color: $hover;
    }
}
#header {
    @include rounded-corner($radius: 10px)
}

Less的混合器使用方式，如同Sass的简化版：

.rounded-corner(@radius, @hover: red) {
    -moz-boeder-radius: @radius;
    -webkit-border-radius: @radius;
    border-radius: @radius;
    &:hover {
        color: @hover;
    }
}
#header {
    .rounded-corner(10px)
}

Stylus的混合书写方式：

rounded-corner(radius, hover = red)
    -moz-boeder-radius: radius;
    -webkit-border-radius: radius;
    border-radius: radius;
    &:hover 
        color: hover;

#header 
    rounded-corner(10px)

三种预处理器编译后的结果如下：

#header {
    -moz-boeder-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    &:hover 
        color: red;
}

注意在Less中@arguments可以传递所有参数， Stylus的arguments具有相似功能，这在某些情况很方便。

嵌套

三种预处理器的嵌套思想几乎一致，只是写法上略有不同。而嵌套功能的目的是减少不必要的代码量，使父子节点关系更加明了，优化css。css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要一遍又一遍地写同一个ID，如果写原生的css是相当的烦人。注意的是写伪元素和伪类时，前面要加上父选择器标识符&。比如有以下一段原生css代码：

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

现在将这段代码转变为Sass或Less:

#header {
    h1 {
        font-size: 26px;
        font-weight: bold;
    }
    p {
        font-size: 12px;
        a {
            text-decoration: none;
            &:hover {
                border-width: 1px;
            }
        }
    }
}

如果用Stylus来写的话，将会缩减更多：

#header
    h1
        font-size 26px
        font-weight bold
    p
        font-size 12px
        a
            text-decoration none
            &:hover
                border-width 1px

继承

Stylus的@extend指令受SASS实现的启发，基本一致，除了些轻微差异。此功能大大简化了继承其他语义规则集的语义规则集的维护。目前Stylus与SASS不同之处在于SASS不允许@extend嵌套选择器。
下面是继承的示例：

.message {
  padding: 10px;
  border: 1px solid #eee;
}
.warning {
  @extend .message;
  color: #E2E21E;
}

// 编译后
.message, .warning {
  padding: 10px;
  border: 1px solid #eee;
}
.warning {
  color: #E2E21E;
}

Less继承方式和Sass，Stylus不同，它在嵌套中继承选择器下的样式，缺点是每个选择器会有重复样式产生：

.message {
    padding: 10px;
    border: 1px solid #eee;
}
.warning {
    .message;
    color: #E2E21E
}

颜色函数

Sass颜色函数

lighten($color, 10%); /* 返回的颜色在$color基础上变亮10% */
darken($color, 10%);  /* 返回的颜色在$color基础上变暗10% */
saturate($color, 10%);   /* 返回的颜色在$color基础上饱和度增加10% */
desaturate($color, 10%); /* 返回的颜色在$color基础上饱和度减少10% */
grayscale($color);  /* 返回$color的灰度色*/
complement($color); /* 返回$color的补色 */
invert($color);     /* 返回$color的反相色 */
mix($color1, $color2, 50%); /* $color1 和 $color2 的 50% 混合色*/

Less颜色函数

lighten(@color, 10%); /* 返回的颜色在@color基础上变亮10% */
darken(@color, 10%);  /* 返回的颜色在@color基础上变暗10%*/
saturate(@color, 10%);   /* 返回的颜色在@color基础上饱和度增加10% */
desaturate(@color, 10%); /* 返回的颜色在@color基础上饱和度降低10%*/
spin(@color, 10);  /* 返回的颜色在@color基础上色调增加10 */
spin(@color, -10); /* 返回的颜色在@color基础上色调减少10 */
mix(@color1, @color2); /* 返回的颜色是@color1和@color2两者的混合色 */

Stylus颜色函数

lighten(color, 10%); /* 返回的颜色在'color'基础上变亮10% */
darken(color, 10%);  /* 返回的颜色在'color'基础上变暗10% */
saturate(color, 10%);   /* 返回的颜色在'color'基础上饱和度增加10% */
desaturate(color, 10%); /* 返回的颜色在'color'基础上饱和度降低10% */

条件语句

Sass条件语句中使用@if，@else，@else if：

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

Stylus的条件语句使用if，else，else if

overload-padding = true

if overload-padding
  padding(y, x)
    margin y x

body
  padding 5px 10px

Less和Sass，Stylus不同，它使用关键词when，而且提供了很多类型检查函数来辅助条件表达式，例如：iscolor、isnumber、isstring、iskeyword、isurl等等，支持AND，OR，NOT支持表达式。

.mixin (@a) when (iscolor(@a)) { 
  background-color: black; 
 } 
 .mixin (@a) when (isnumber(@a)) { 
  background-color: white; 
 } 
 .class1 { .mixin(red) } 
 .class2 { .mixin(6) }  
// 转译出来的CSS

.class1 { 
  background-color: black; 
 } 
 .class2 { 
  background-color: white; 
 }

循环语句

Sass使用@for，通过from，through来实现循环，另外还支持@each，@while的使用。

@for $i from 1 through 3 {
    .item-#{$i} { width: 2em * $i; }
}   

// 编译后
.item-1 {  width: 2em; }
.item-2 {  width: 4em; }
.item-3 {  width: 6em; }

几种循环格式如下：

@for $var from [start] through [end] {block}
@each $var in [list] {block}
@while [condition] {block}

在Stylus样式中通过for/in对表达式进行循环，形式如下：

for <val-name> [, <key-name>] in <expression>

示例：

body
  fonts = Impact Arial sans-serif
  for font, i in fonts
    foo i font  
// 编译后

body {
  foo: 0 Impact;
  foo: 1 Arial;
  foo: 2 sans-serif;
}

Less的循环方式如同它的条件语句，通过when来实现。
基本上，Less 的设计思路偏向原生 CSS，而 Sass 和 Stylus更偏向计算机语言（分别是 Ruby 和 JS）。所以，可能，前者更适合前端，后者适合工程师。相对于Sass和Less而言，Stylus更加简洁，拥有更强大的功能，所以我选择Stylus。