Stylus—CSS预处理框架

Stylus 是一个CSS的预处理框架，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，它是一种新型语言，可以创建健壮的、动态的、富有表现力的CSS。比较年轻，其本质上做的事情与 SASS/LESS 等类似，应该是有很多借鉴，所以近似脚本的方式去写CSS代码，和js联系更加紧密。

随着项目越来越复杂，CSS的预处理越来越重要，css维护工作会越来越困难，造成这些困难的很大原因源于CSS 是一门非程序式语言，没有变量、函数、作用域等概念。为了更好的管理、维护CSS代码，可以使用stylus、sass、less等技术, 这里选择stylus。

参考网址：http://stylus-lang.com

开源地址：https://github.com/stylus/stylus

stylus的安装：

由于stylus是基于node的，所以第一步要先安装好node环境。

1、node下载地址：http://nodejs.cn/download/，下载后运行，点下一步。。。。至到安装完成。

stylus的安装除了需要上面的node环境以外，还需要借助另一个工具：npm 包管理工具，好在node在安装时就已经自动一并带装好了，所以这一步就直接略过。

node环境安装好后：

打开命令行工具，或按住键盘上的shift 再点鼠标右键 --> 在此外打开命令窗口。

输入： node -v        按回车键，就可查看node的版本了，如果能看到，就表示node环境已经安装好了。

输入：npm -v      按回车键，就可查看npm的版本了。

2、stylus正式安装：

在命令行中输入：npm install -g stylus      按回车键，就开始安装了。。。

安装完成后输入：stylus -h        可查看stylus的相关帮助信息了，不是全是英文。。哈哈。。

3、使用stylus写css样式：

打开代码编辑器，在项目目录中专门放css样式表的目录下 --> 新建一个文件（注后缀名一定要改为.styl），然后在这个文件中，就可以用stylus的写法去写样式啦。。。

写好以后 在当前目当（就是刚才新建styl文件的那个目录）打开命令行，

如果要在当前目录输出生成css文件

输入 stylus -w demo.styl       按回车

如果要在指定的目录输出生成css文件

输入 stylus -w demo.styl -o 目录地址   按回车

注：

-w 是自动监视文件。

 -o 是将编译后的CSS文件输出到指定文件中。

然后。。。。。 就多出一个相同名字的.css文件啦。 到此在大功告成。

注：

只要命令行工具不关闭，当你更改了styl文件中的样式后，它会自动同步生成到.css文件中去（前提：生成时加上了 -w参数）

编写：

一、变量 （以 “ $ ” 开头，也可无前缀符号直接声明变量）

var = 10  //支持多样性的CSS语法 。

二、后缀名（默认使用 .styl 的作为文件扩展名）

文件名.styl

三、混合（Mixins）

Mixins是CSS预处理器中语言中最强大的特性。Mixins可以将一部分需重用的样式抽出，只需定义一次，就可被很多选择器重复使用,直接定义Mixins名，然后在定义参数和默认值之间用等号（=）来连接。

例如：

声明混合    

setColor(mainC=#000)  {  

color : mainC ;  

}

直接以默认值调用混合 

.sBox  { 

setColor(); 

} 

调用混合且传入自定义参数值

.bBox  { 

setColor(#fff);    

}

四、嵌套实现后代选择器 （嵌套语法是相同的，可以通过大括号“{}”之间的层次关系实现嵌套， 也可以不用大括号“{}”，用缩进。还可以使用“&”符号来引用父选择器。）

普通写法：

html, body{

width: 100%; height: 100%;

}

*{

margin: 0px; padding: 0px;

}

.box{
width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; 
}

.box .header{
position: absolute: top:0px; left:0px; width: 100%; height: 50px;background: green;
}

.box .main{ 
position: absolute; top: 50px; left: 0px; bottom: 50px; right: 0px; background: blue; overflow-y: scroll;  -webkit-overflow-scrolling: touch;
}

.box .footer{
position: absolute; left:0px; bottom: 0px; width: 100%; height: 50px; background: red;
}

.box .footer ul{ 

display: flex;

}

.box .footer li{ 

flex: 1; line-height: 50px; text-align: center; border-right: 1px solid white ;

}

stylus写法：

html, body
width: 100%; height: 100%;
*
margin: 0px; padding: 0px;
.box
width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; 
.header
position: absolute: top:0px; left:0px; width: 100%; height: 50px;background: green;
.main
position: absolute; top: 50px; left: 0px; bottom: 50px; right: 0px; background: blue; overflow-y: scroll;  -webkit-overflow-scrolling: touch;
.footer
position: absolute; left:0px; bottom: 0px; width: 100%; height: 50px; background: red;
ul 
display: flex; list-style: none;
& > li
flex: 1; line-height: 50px; text-align: center; border-right: 1px solid white ;

五、继承(Inherit) （当我们需要为多个元素定义相同样式的时候，我们可以考虑使用继承的做法。使用“@extend”开始，后面紧跟被继承的选择器。）

例如：

.block{ margin: 10px 20px; padding: 4px; font-size:16px; color: #666;}

.div{ @extend.block; width: 100px; height: 200px;}

ul > li { @extend.block; }

编译后的结果：

六、条件语句 （与其它编程语言类似，不过可以省略大括号）

例如：

type = link;

p{

if type == link

color:blue;

else

color:green;

   

 编译后的结果：

    p{ 

color:blue;

    }  

七、循环语句 （使用for/in对表达式进行循环）

例如：

for i in 1 2 3

.item-{i}

width 2em * i

编译后的结果：

.item-1  {   

width : 2em ;    

}   

.item-2  {   

width : 4em ;    

}

.item-3  {   

width : 6em ;    

}      

八、总结

1、Stylus具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性；

2、可以通过缩进表示层次与嵌套关系；

3、具 有类似于其它语言的作用域概念；

4、具有类似其它语言的条件语句、循环语句等；

5、可以基于NodeJS NPM下载相应库后进行编译；