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

时间 2019-11-06

标签对比学习 sass stylus 经常使用功能繁體版

原文原文链接

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

sass中文官网php

sass用法指南css

stylus官网html

stylus中文文档java

下面就对两者的经常使用功能作一个简单的对比node

一、安装

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

gem install sass

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

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

npm install stylus

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

二、使用

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

三、变量

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

八、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还提供了一些其余的很强大的功能:

一、arguments变量
这个变量更合理的解释是定义的mixin看成函数调用的时候(两者的定义是相同的)存在的局部变量。咱们能够这样使用:

radius()
   border-radius: arguments

调用：

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

二、父级引用
咱们一样能够在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也提供了其余的几个比较实用的命令。

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

@media print
    #header
     #footer
       display: none

二、@font-face
用法和常规css用法一致，一样使用stylus的格式书写:

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

三、@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')

1三、自定义函数

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编程的能力，想了解更多内容的同窗能够经过以上提供的连接进行学习。