安装
npm install stylus -g(全局安装)
编译
新建文件夹 src 里面新建文件 test.stylus
执行 stylus src/
输出 compiled src\test.css
语法
选择器
缩进
省略了 {} 和 ;
.item
width:100px
height:100px
规则集
同时为多个选择器定义属性
方法一
.item1, .item2
border:1px solid #ccc
方法二
.item1
.item2
border:1px solid #ccc
父级引用**
与less语法相同,采用 字符 & 来指向父选择器
.item
color dodgerblue
&:hover
color #000
变量**
定义变量
首先定义一个表达式变量,我们就可以在后续的样式中使用这个变量了。场景:定义一个颜色变量
即可以定义多个文件引入样式,比如 base文件
color = dodgerblue
.item
width:100px
height:100px
color:color
查找属性值
场景:某些属性和某些属性互相有关系、
#logo
position:absolute
top:50%
left:50%
width:w=150px
height:h=80px
margin-left:-(w/2)
margin-top:-(h/2)
或者不定义的方式:直接通过@就可以引用
margin-left:-(@width/2)
插值
方法和混写
方法可以返回值,作为表达式调用。Mixin 不能,是作为状态调用
举个方法的例子:我们定义个add函数来做加法。调用时直接加入参数,得到的返回值即可赋在属性中
add(a,b)
a+b
div1
width:add(100,200)
=>
div1{
width:300
}
混合书写的例子
border-radius(n)
-webkit-border-radius n
-moz-border-radius n
border-radius n
form input[type=button]
border-radius[5px]
=>
form input[type=button]{
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
=>
而且二者都可以使用 arguments 这个局部变量。上述写法也可以改变为:
border-radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments
form input[type=button]
border-radius(5px)
文章链接**
https://www.ibm.com/developerworks/cn/web/wa-stylus-css-preprocessor-enhancer/index.html