nicepainkiller 2019-06-21
在众多的css
预处理器语言中,sass
和stylus
算是十分优秀的两个。本文主要针对两者的常用功能做个简单的对比分析。在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言。
本文涉及到的sass
部分,均来自于阮一峰老师的SASS用法指南
。同时不会对sass
和stylus
的具体用法做十分细致的介绍,感兴趣的同学可参考如下资料进行系统的学习。
下面就对二者的常用功能做一个简单的对比
sass
时基于Ruby
语言写的,所以安装sass
之前,需要先安装Ruby
。假设你已经安装了Ruby
,在命令行直接运行。
gem install sass
安装成功之后,就可以使用了。
stylus
是nodejs
的一个模块,安装之前,请确保安装了nodejs
。然后直接在命令行中运行。
npm install stylus
然后,npm
就会为你下载最新包到当前目录的node_modules
目录中
sass
就是普通的文本文件,里面可以是css
语法,根据后缀名的不同(sas
s的后缀名可以是.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
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
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)
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
sass
提供了三种风格的注释:
标准的css
注释 /* comment */,会保留到编译后的文件中。
单行注释 // comment
,只保留在sass源文件中。编译后省略。
在/*!
后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。
/*! 重要注释 */
stylus
也提供了上述三种注释:
//
单行注释,css
不输出
/* 多行注释只在compress选项未启用的时候输出到编译后的文件中 */
/*! 多行注释,任何情况都输出到编译后的文件中 */
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
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
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内置方法
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 } }
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条件
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')
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
编程的能力,想了解更多内容的同学可以通过以上提供的链接进行学习。