stylus深入了解

作者 新城 日期 2018-05-24
stylus深入了解

来源

1.选择器

基本用法
相比css省略了大括号 冒号 封号 如果习惯添加 stylus也不会报错

1
2
3
4
5
6
7
8
//stylus
body
color white

//css
body{
color:white;
}

&符号的基本使用
&符号表示父元素

1
2
3
4
5
6
7
8
9
10
11
12
13
// stylus
body
color red
&:hover
color #fff

// css
body{
color:red;
}
body:hover{
color: #fff;
}

2.变量

使用变量的时候 建议$开头命名

1
2
3
4
$font-size = 14px

body
font-size $font-size

3.插值(设置浏览器兼容性)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 兼容性设定
vendor(prop, args)
-webkit-{prop} args
-moz-{prop} args
{prop} args

bor-rad()
vendor('border-radius', arguments)

button
bor-rad 14px



// 使用for循环 进行样式的设定
table
for row in 1 2 3 4 5
tr:nth-child({row})
height: 10px * row

4.运算符

下列运算符优先级依次从最高到最低

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
[]
! ~ + -
is defined
** * / %
+ -
... ..
<= >= < >
in
== is != is not isnt
is a
&& and || or
?:
= := ?= += -= *= /= %=
not
if unless

####一元运算符

1
2
3
4
!0  //true
非0及真
-5px // -5px
--5px // 5px

not运算符最低

####二元运算符

5.混合书写

6.方法

7.关键字参数

8.内置方法

9.其余参数

10.注释

11.条件

12.迭代

13.@import

14.@media

15.font-face

16.keyframe

17.extent