关于stylus
stylus是css的预处理框架,是以.styl为后缀的文件,可以创建健壮的,动态的富有表现的css。它用来为css增加一些编程的特性,比如在css中可以使用变量,函数等编程语言的特性,从而是css更加的简洁,适应性更强,代码也更加的直观易懂。
在写代码的时候发现stylus有个特点,代码风格有点像python,特别简洁不需要大括号,分号什么的并且也是用空格来规范格式。
安装
使用stylus首先需要安装,当然这也是一个比较简单的事情,安装stylus只需要一个简单的命令nmp install -g stylus(这是在你安装好了nodejs并且配置好了环境变量情况下,安装和配置nodejs可以去网上查找一下,很简单这里就不多讲)。安装好了后使用stylus --version查看是否安装成功。
简单的使用stylus
首先创建style.styl文件编写一段简单的stylus的代码
bgc = red
$border-radius(arg)
-webkit-border-radius: arg
-moz-border-radius: arg
border-radius: arg
*
margin 0
padding 0
.box
height 100
width 100
background-color bgc
border-radius(2px)
.content
background-color bgc
h1
color white
&:hover
color green
使用命令stylus -w style.styl -o style.css将文件style.styl文件编译成并输出成css文件,编译后生成的css代码如下
* {
margin: 0;
padding: 0;
}
.box {
height: 100;
width: 100;
background-color: #f00;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.box .content {
background-color: #f00;
}
.box .content h1 {
color: #fff;
}
.box .content h1:hover {
color: #008000;
}
是不是感觉写css简单了许多,写一个styl文件再编译生成的css文件效率高多了。
下面我们在来分析一下这段代码
变量
bgc = red
background-color bgc
这段代码声明了变量bgc,并且为变量赋值为red。在需要用到相同颜色的地方可以
直接使用这个变量.
前面有两处背景颜色为red,直接使用变量,当需要改变颜色时不需要一个个的改,
只需要改变变量的值就可以了。
函数
$border-radius(arg)
-webkit-border-radius: arg
-moz-border-radius: arg
border-radius: arg
$border-radiius(2px)
这段代码声明了函数,并且接收了参数arg.在使用时只需要像上面的代码那样输入函数名称
和参数就可以设置css属性。参数不一定要传入的,根据代码的情况跟其他语言都差不多。
选择器
.box
height 100
width 100
background-color bgc
border-radius(2px)
.content
background-color bgc
h1
color white
&:hover
color green
这段代码被编译成
.box {
height: 100;
width: 100;
background-color: #f00;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.box .content {
background-color: #f00;
}
.box .content h1 {
color: #fff;
}
.box .content h1:hover {
color: #008000;
}
在元素里面写样式的时候是使用一个tab键缩进来体现是属于该元素的样式。写.box 的子元素.content的样式不需要在像写css那样重新去写,只需要在.box下使用缩进来体现元素.content是.box的子元素然后在写.content的样式就可以。是不是感觉喜欢上了stylus了。
在上面的这段stylus的代码使用了一个&符号,这个&符号根据编译出来的代码可以很容易理解,它会指向最近的父级元素并且与他连接。
@规则
@import导入文件.styl,任何.css扩展文件将作为字面量,stylus样式作为动态导入的。
@import "reset.css"
@css{} {}里面的不会被编译
@block{} 作为一个块赋值给一个变量
@media 和在css使用的方法相同
@keyframe 编译的时候转换成@-webkit-keyframes,可以通变量来添加前缀
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。