CSS预处理器之stylus

1.简单介绍

    简单来说stylus就是一种针对css的开发语言，想必大家在写css的时候很烦去查一个颜色的16进制，或者重复写一些相同的代码，那么我们就需要这样一种语言，将逻辑、函数等融入css中，让我们更加方便高效的去开发前端页面，stylus起源于node社区，通俗来说，你用函数的形式写完了一个css，可是浏览器不认识，接下来就由预编译工具将代码编译成普通的css代码。

2.语法

先说一下安装

$ npm install stylus

安装好node之后，执行这个命令就可以使用stylus

----

      stylus语法重点介绍下面几部分：

     1）可以省略花括号和分号，例如：

          .content

             color: #000

             font-size:400

   

  2)  引入变量，先声明变量，在下面使用的时候可以直接取用，例如：

marginBorder = 10px；

          .content

             color: #000

             font-size:400

            margin-left  marginBorder               ------------>         编译结果：margin-left:10px;

3)混合（mixins）

         这一点是比较重要的特性。

        你可以把它的作用理解为将一部分样式拿出来，组成一个可重复使用的样式模块，这样你就大大提升了效率，本人认为，写代码的体验也提高了不少

我们先来声明一个mixins为

showImg（imgUrl）{

    background-img: url（imgUrl）；

}

接下来我们看如何使用：

.avater

   showImg("/src/img/logo.png"); 

现在看到这样我们感觉反倒麻烦，但是你想，要是一个电商平台的话，有很多图片，重复使用还是性价比较高的。

4）嵌套

    关于嵌套的话，可以这样去理解，我们平常在写css时，如果dom较为复杂且很多重复的元素，写选择器的时候，我们要从外层找到最里层这样就很容易发生错误，stylus给我们提供了类似于树形结构的书写模式，增强了它的结构性，我们也方便去维护。例如下面：

平常我们的css:

.content{

xx

}

.content span{

yy

}

.content span#contentList{

zz

} 

现在我们可以这样写

.content

   xx

   span

     yy

     .contentList

       zz

组织结构一目了然，也便于书写管理

5）extend继承

css中如果有几个模块样式相同，我们把他们写在一起然后命名,这就是继承，如下：

.header,.content,.footer{

   vvvvvvvv

}

而在stylus中更像一种函数的形式,如下:

 .header

   vvvv

.content

  @extend .header

   uuuuuuu

在这里，content就继承了header的全部属性

6)可以使用条件语句

   先声明验证条件

box（x,y,margin = false）

  padding y x

  if  margin

     margin y x

写一个box的复用样式函数传入三个参数，如果margin传的时true就执行margin y  x  这部分，否则执行padding那部分

使用:

body

   box(5px,10px,true)
编译后的结果：

body{

 margin: 5px  10px;

}

像其他循环语句也能用在stylus中，这里不多说了，自己有兴趣去看看官网吧（stylus-lang.com）

总结：stylus的出现，就是一些前端大佬不想做这些无聊的工作（写重复的样式）而衍生的，在这里感谢这些nodeJs社区的大佬为我们提供了便利，助我们在前端这条路上越走越远。

最后有兴趣的同学可以看看底下这篇，比较详细，我也是看了之后写的这篇博客，希望对你有用.

sass、less和stylus的对比，写的很详细，有时间有兴趣可以看看

http://caibaojian.com/sass-less-stylus.html