stylus怎么用

这篇文章将为大家详细讲解有关stylus怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

　　Stylus是一款富有表现力的、动态的、健壮的CS预处理。css预处理顾名思义，预先处理css。那stylus咋预先处理呢？stylus给css添加了可编程的特性，也就是说，在stylus中可以使用变量、函数、判断、循环一系列css没有的东西来编写样式文件，执行这一套骚操作之后，这个文件可编译成css文件。

　　Stylus的安装

　　首先，安装stylus（确保之前已经安装nodejs）。

　　$npminstallstylus

　　安装之后，运行stylus-h可查看帮助。运行stylusexample.styl可将demo.styl文件编译成example.css文件。

　　Stylus的运行

　　1.语法

　　Stylus的语法花样多一些，它使用“.styl”的扩展名，Stylus也接受标准的css语法，但是他也接受不带花括号和分号的语法，如下所示：

　　/*style.styl*/

　　h2{

　　color:#0982C1;

　　}

　　/*省略花括号*/

　　h2

　　color:#0982C1;

　　/*省略花括号和分号*/

　　h2

　　color#0982C1

　　2.变量

　　你可以在css预处理器中声明变量,并在整个样式表中使用。css预处理器支持任何变量（例如：颜色、数值（不管是否包括单位）、文本）。然后你可以在任意地方引用变量。

　　Stylus声明变量没有任何限定,你可以使用"$"符号开始。结尾的分号(;)可有可无,但变量名和变量值之间的等号(=)是需要的。有一点需要注意的是,如果我们使用"@"符号开头来声明（0.22.4）变量，Stylus会进行编译，但其对应的值并不会赋值给变量。换句话说，在Stylus中不要使用“@”符号开头声明变量。

　　mainColor=#0982c1

　　siteWidth=1024px

　　$borderStyle=dotted

　　body

　　colormainColor

　　border1px$borderStylemainColor

　　max-widthsiteWidth

　　上面的代码都将转译成相同的css。你可以想像一下,变量的作用有多大。我们不需要为了修改一个颜色而输入许多次,也不需要为了修改一个宽度去到找寻找他.(我们只需要修改定义好的变量,修改一次就足够).

关于“stylus怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。