css预处理器 sass和stylus对比以及常用功能
在众多的css预处理器语言中，sass和stylus算是十分优秀的两个。本文主要针对两者的常用功能做个简单的对比分析。在对比中了解二者的差异，同时帮助大家更好的掌握这两种预处理语言。
本文涉及到的sass部分，均来自于阮一峰老师的SASS用法指南
。同时不会对sass和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提供了四种编译风格:
nested：嵌套缩进的css代码，它是默认值。expanded：没有缩进的、扩展的css代码。compact：简洁格式的css代码。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编程的能力，想了解更多内容的同学可以通过以上提供的链接进行学习。
浙公网安备 33010602011771号