css预处理器 sass和stylus对比以及常用功能

在众多的css预处理器语言中，sass和stylus算是十分优秀的两个。本文主要针对两者的常用功能做个简单的对比分析。在对比中了解二者的差异，同时帮助大家更好的掌握这两种预处理语言。

本文涉及到的sass部分，均来自于阮一峰老师的SASS用法指南

。同时不会对sass和stylus的具体用法做十分细致的介绍，感兴趣的同学可参考如下资料进行系统的学习。

• sass中文官网
• sass用法指南
• stylus官网
• stylus中文文档

---

下面就对二者的常用功能做一个简单的对比

---

1、安装

sass时基于Ruby语言写的，所以安装sass之前，需要先安装Ruby。假设你已经安装了Ruby，在命令行直接运行。

gem install sass

安装成功之后，就可以使用了。

stylus是nodejs的一个模块，安装之前，请确保安装了nodejs。然后直接在命令行中运行。

npm install stylus

然后，npm就会为你下载最新包到当前目录的node_modules目录中

2、使用

sass就是普通的文本文件，里面可以是css语法，根据后缀名的不同(sass的后缀名可以是.sass或.scss)书写格式不同，具体的sass语法见阮一峰老师的文章。

stylus也是普通的文本文件,里面也可以是css语法，stylus文件的后缀名一般是.styl。

两者都提供了基本的命令行语法，所以我们可以直接在命令行中使用命令对sass文件或者style文件进行编译。但相对来说stylus的命令行操作更为强大。

下面的命令可以直接在屏幕上显示.scss文件转化后的css代码(假设文件的名称就是test)

sass test.scss

对应的stylus的操作就是:

stylus test.styl

但是stylus的编译结果不会再屏幕上输出，而是生成同名的css文件。

如果要将显示结果保存成文件，sass需要在后面再跟一个.css文件名。

sass test.scss test.css

stylus则直接如下，就生成了一个同名的文件。

stylus test.styl

sass提供了四种编译风格:

1. nested：嵌套缩进的css代码，它是默认值。
2. expanded：没有缩进的、扩展的css代码。
3. compact：简洁格式的css代码。
4. compressed：压缩后的css代码。

sass的编译选项的使用,需要使用--style来指定:

sass --style compressed test.sass test.css

style提供了--compress来压缩编译结果:

stylus --compress test.styl

sass可以监听某个文件或者目录，一旦源文件改变，就自动生成编译后的版本。

// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets

stylus也是通过--watch的选项来监听源文件的变动,改变和自动编译。

stylus --watch test.styl

除此，stylus的命令行工具还提供了一些其它基本的功能:

1. repl环境

在命令行中直接输入stylus就得到了stylus的repl环境，我们可以直接在命令行中书写stylus的内容:

    body
      color: red

然后按下ctrl+d键，就直接在命令行中输出编译结果。

2. stylus可以直接将css编译成stylus格式

stylus --css test.css

3、变量

sass允许使用变量，所有的变量以$开头。

$blue: #1875e7;
div {
   color: $blue
 }

stylus也允许使用变量，变量名的$是可选的，变量值可以是表达式。

color = blue 或者  $color = blue
div
    color: color

如果变量需要镶嵌在字符串中，sass需要写在#{}之中。

$side: left;
.rounded {
    border-#{$side}-radius: 5px;
}

stylus则需要使用{}

side = 5px
.roundeed
    border-{side}-radius: 5px

4、计算功能

sass允许在代码中使用算式:

body {
    margin: (14px/2);
    top: 50px + 100px;
    right: $var * 10%;
  }

stylus同样也支持在代码中使用算式:

 body
    margin: (14px/2)
    top: 50px + 100px
    right: var * 10%

注意%也是stylus的一个运算符，所以上面的right实际的计算结果是var * 10 % === var * 10。

stylus的运算十分强大，给予了css的编程能力。有兴趣的同学可以张鑫旭大神翻译的stylus文档。

除此，stylus有一个更为强大的地方就是，stylus可以直接进行属性查找，使用@符号查找属性。如一个常见的垂直居中的例子:

  div
    width: 100px
    height: 100px
    position: absolute
    top: 50%
    left: 50%
    margin-left: -(@width / 2)
    margin-top: -(@width / 2)

5、嵌套

sass允许选择器嵌套。比如下面的css代码:

  div h1 {
    color: red
  }

可以写成：

div {
    h1{
      color: red
   }
 }

stylus同样支持选择器嵌套，上面的代码可以写成:

div
  h1
    color: red

sass也支持属性嵌套,比如border-color属性可以写成:

 p{
     border: {
       color: red;
     }
 }

border后面需要添加冒号。

stylus对这个功能没有提供支持

在嵌套的代码块内，两者都可以通过&引用父元素。比如a:hover伪类，可以写成:

 a{
     &:hover {
         color: #ffb3ff
     }
}

a
 &:hover
   color: #ffb3ff

6、注释

sass提供了三种风格的注释:

• 标准的css注释 /* comment */，会保留到编译后的文件中。
• 单行注释 // comment，只保留在sass源文件中。编译后省略。
• 在/*! 后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

/*! 重要注释 */

stylus也提供了上述三种注释:

• // 单行注释，css不输出
• /* 多行注释只在compress选项未启用的时候输出到编译后的文件中 */
• /*! 多行注释，任何情况都输出到编译后的文件中 */

7、继承

sass允许一个选择器，继承另一个选择器。比如，现在class1：

.class1 {
    border: 1px solid #ddd
  }

class2要继承class1，就要使用@extend命令。

.class2 {
    @extend .class1
    font-size: 120%
  }

stylus的继承方式和sass基本一致，但有一些稍微的不同。

stylus实现继承:

.class1
    border: 1px solid #ddd

class2继承class1

.class2
    @extend .class1
    font-size: 120%

两者的区别主要在于--sass不允许@extend嵌套选择器:

如下面的样式:

div
  h1
   color: red

在sass中，如果按照下面这样写就会直接编译错误。

 .div2 {
    @extend div h1
 }

而在stylus中却可以成功编译，因为stylus中，只要选择器匹配，继承就会生效。

.div2
   @extend div h1

8、Mixin

sass使用@mixin命令，定义一个代码块。

@mixin left {
    float: left;
    margin-left: 10px;
  }

使用@include命令，调用这个mixin。

div{
   @include left;
 }

stylus中的mixin和其函数的书写形式是一样的。但是应用却很大的不同！书写形式如下:

left()
  float: left
  margin-left: 10px

调用的时候直接通过名称调用:

div
  left()

sass中的mixin可以传递参数，同时还可以为参数提供默认值。如下面是一个mixin实例，用来生成浏览器的前缀。

@mixin rounded($vert, $horz, $radius: 10px){
  　border-#{$vert}-#{$horz}-radius: $radius;
　　-moz-border-radius-#{$vert}-#{$horz}: $radius;
　　-webkit-border-#{$vert}-#{$horz}-radius: $radius;
  }

使用的时候可以像下面这样调用:

#navbar li {@include rounded(top, left)}

stylus也允许给mixin提供参数并提供默认值，所以上面的形式在stylus中的书写是这样的：

rounded(vert, horz, radius = 10px)
     border-{vert}-{horz}-radius: radius
     -moz-border-radius-{vert}{horz}: radius;
　　　-webkit-border-{vert}-{horz}-radius: radius;

按照如下方式使用：

#navbar
   li
    rounded(top, left)

除此，stylus的mixin还提供了一些其他的很强大的功能:

1、arguments变量

这个变量更合理的解释是定义的mixin当作函数调用的时候(二者的定义是相同的)存在的局部变量。我们可以这样使用:

radius()
   border-radius: arguments

调用：

div
  radius(5px 10px/5px 5px)

2、父级引用

我们同样可以在stylus的mixin中使用父级引用操作符:&

hover()
   a
     &:hover
        color: red

9、颜色函数

sass提供了一些内置的颜色函数，以便生成系列颜色。

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

在stylus中也提供了内置的颜色函数，使用也十分简单。如：

red(#c00) //返回颜色的r色值
image-size(path) //获取指定path图片的width和height

更多的方法，请参考stylus内置方法

10、插入文件

sass的@import命令，用于插入外部的文件。

@import "path/filename.scss";

如果是css文件，则等同于css的import命令。

@import "foo.css";

stylus也提供了@import命令用于插入外部的文件，和sass的用法基本一致，如下:

@import "reset.css"
@import "reset.styl"

除了@import命令，stylus也提供了其他的几个比较实用的命令。

1、@media

工作原理和css中常规的媒体查询一样，实用stylus的书写形式:

 @media print
    #header
     #footer
       display: none

2、@font-face

用法和常规css用法一致，同样使用stylus的格式书写:

@font-face
  font-family Geo
  font-style normal
  src url(fonts/geo_sans_light/GensansLight.ttf)

3、@keyframes

写法和常规的css一致，但会默认编译成@-webkit-keyframes，即:

@keyframes
   0%
     color: red
   100%
     color: green

会变编译成:

@-webkit-keyframes{
   0%{
       color: red
   }
   100%{
       color: green
   }
 }

我们可以全局指定vendors变量进行标准解析:

vendors = official
@keyframes
    0%
      color: red
    100%
      color: green

会编译成:

@keyframes{
   0%{
       color: red
   }
   100%{
       color: green
   }
 }

11、条件语句

sass中使用@if可以用来做判断，如下：

p {
     @if 1 + 1 == 2 {border: 1px solid;}
     @if 5 < 3 {border: 2px dotted;}
 }

stylus中可以直接使用if关键字，级上面的写法在stylus中的书写方式如下：

 p
     if 1 + 1 == 2
       border: 1px solid
     if 5 < 3
       border: 2px dotted

sass中也提供了@else关键字和@if搭配:

@if lightness($color) > 30% {
　　background-color: #000;
} @else {
　　background-color: #fff;
}

stylus则可以直接在if语句后面跟上else语句:

if red(color) > 50 {

 } else {

 }

除此，stylus也提供了unless关键字，同时支持条件后置语法，具体参考stylus条件

12、循环语句

sass支持for循环:

@for $i from 1 to 10 {
　.border-#{$i} {
　　　border: #{$i}px solid blue;
  }
}

也支持while循环:

 $i: 6;
 @while $i > 0 {
　.item-#{$i} { width: 2em   $i; }
 　$i: $i - 2;
}

也可以使用@each命令进行循环:

@each $member in a, b, c, d {
　.#{$member} {
  　　background-image: url("/image/#{$member}.jpg");
　　}
}

stylus只提供了一个for/in进行循环:

for i in 1 2 3 4 5 6 7 8 9
  .border-{i}
      border: solid blue unit(i, 'px')

13、自定义函数

sass允许用户编写自己的函数:

@function double($n) {
　　@return $n * 2;
}
#sidebar {
　　width: double(5px);
}

stylus也允许用户编写自己的函数，函数的定义方式和mixin定义方式一样：

double(n)
    n * 2
#sidebar
   width: double(5px)

除了可以给函数赋予默认参数之外，stylus的函数是允许返回多个值的：

width()
   20px 10px

width()[0] // 20px

以上就是对sass和sylus常用功能的简单介绍，在对比中学习，相信读者会很快了解两者之间差异。大家只要掌握了以上提到的二者的常用功能，就能使用这两种预处理器应对日常的开发了。但这还有很多功能这里没有提到，尤其是stylus作为nodejs的一个模块，提供了强大的javascript编程的能力，想了解更多内容的同学可以通过以上提供的链接进行学习。