对比学习sass和stylus的常用功能

nicepainkiller 2019-06-21

在众多的css预处理器语言中,sassstylus算是十分优秀的两个。本文主要针对两者的常用功能做个简单的对比分析。在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言。
本文涉及到的sass部分,均来自于阮一峰老师的SASS用法指南
。同时不会对sassstylus的具体用法做十分细致的介绍,感兴趣的同学可参考如下资料进行系统的学习。


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


1、安装

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

gem install sass

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

stylusnodejs的一个模块,安装之前,请确保安装了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就得到了stylusrepl环境,我们可以直接在命令行中书写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)

除此,stylusmixin还提供了一些其他的很强大的功能:

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

radius()
   border-radius: arguments

调用:

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

2、父级引用
我们同样可以在stylusmixin中使用父级引用操作符:&

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文件,则等同于cssimport命令。

@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编程的能力,想了解更多内容的同学可以通过以上提供的链接进行学习。

相关推荐