关于stylusStylus是一个CSS预处理框架，后缀为.styl的文件可以创建健壮、动态和表现力强的CSS。用来给css增加一些编程特性，比如在css中使用变量、函数等编程语言特性，使css更简洁，适应性更强，代码更直观易懂。在写代码的时候，我发现手写笔有一个特点。代码风格有点像python。非常简洁，不需要花括号、分号等，并且使用空格来规范格式。stylus的安装和使用首先需要安装，当然这是比较简单的事情，安装stylus只需要一个简单的命令nmpinstall-gstylus（这个是在你已经安装好nodejs并配置好环境变量的情况下，installandconfigure可以搜索对于网上的nodejs，很简单这里就不说了）。安装完成后使用stylus--version查看是否安装成功。简单使用stylus先创建一个style.styl文件，写一个简单的stylus代码bgc=red$border-radius(arg)-webkit-border-radius:arg-moz-border-radius:argborder-radius:arg*margin0padding0.boxheight100width100background-colorbgcborder-radius(2px).contentbackground-colorbgch1colorwhite&:hovercolorgreen使用命令stylus-wstyle.styl-ostyle.css设置样式文件。styl文件被编译并输出到css文件中。编译后的css代码如下*{margin:0;填充：0;}.box{高度：100;宽度：100；背景色：#f00；-webkit-边框-半径：2px；-moz-边框半径：2px；border-radius:2px;}.box.content{background-color:#f00;}.box.contenth1{color:#fff;}.box.contenth1:hover{color:#008000;}你觉得写css就容易多了，写一个styl文件然后编译生成css文件效率就高多了。我们来分析一下这段代码variablebgc=redbackground-colorbgc这段代码声明了变量bgc，并将值赋给了red。在需要相同颜色的地方可以直接使用这个变量。前面有两个背景色是红色，直接使用变量。当需要改变颜色时，不需要一个一个改变，只需要改变变量的值即可。Function$border-radius(arg)-webkit-border-radius:arg-moz-border-radius:argborder-radius:arg$border-radius(2px)此代码声明函数并接收参数arg。在使用的时候，只需要像上面的代码一样输入函数名和参数，就可以设置css属性了。参数不用传入，根据代码情况，和其他语言类似。选择器.boxheight100width100background-colorbgcborder-radius(2px).contentbackground-colorbgch1colorwhite&:hovercolorgreen此代码编译为.box{height:100;宽度：100；背景颜色：#f00；-webkit-边框半径：2px；-moz-边框半径：2px；border-radius:2px;}.box.content{background-color:#f00;}.box.contenth1{color:#fff;}.box.contenth1:hover{color:#008000;}写样式时在一个元素中，使用tab键缩进以反映属于该元素的样式。不需要像写css那样重写.box子元素的.content样式。只需要在.box下使用缩进来体现元素.content是.box的子元素，然后写上.content的样式即可。你觉得像手写笔吗？在上面的手写笔代码中，使用了&符号。这个&符号根据编译后的代码很容易理解。它会指向最近的父元素并与他连接。@rule@import导入文件.styl，任何.css扩展文件将被用作文字，并且手写笔样式将被动态导入。@import"reset.css"@css{}{}不会被编译@block{}被赋值给一个变量作为一个块@media和css中使用的方法一样@keyframe被转换为@-webkit-时编译关键帧，可以使用变量添加前缀。虽然文章不是很详细，涉及到的一些细节也没有讲到，但是大家可以看看相关的文档。这些主要的会很快学到一些细节。许多事情都与编程语言有关。差不多了，毕竟stylus就是来方便我们的。
