Stylus学习笔记
stylus学习
选择器
缩进语法(必学，必用)
- stylus最贱写法
- 在stylus中 冒号，分号，大括号 都是可选的。
- 我考虑的是我们的编辑器都有高亮显示stylus，属性名与属性值很容易分清，所以 这些可选的我们都去掉，都不用写
body
color white
规则集（必学，必用 换新一行 语法）
- Stylus 就跟css一样，可以使用 逗号为多个选择器同时定义属性
textarea, input
border 1px solid #eee
也可以换新一行也是可以的
textarea
input
border 1px solid #eee
项目考虑：因为我们前端一直以来使用竖行排列样式的，所以另开新行比逗号更符合我们项目的规范，也更易阅读
**注意：** 唯一例外的就是长的像 属性的选择器 我们要在尾部加个逗号
父级引用（必学）
使用 字符 & 指向父选择器
下面栗子，textarea 和 input 在 :hover 伪类 都改变了color值
''textarea
'' input
'' color #A7A7A7
'' &:hover
'' color #000
等同于
''textarea,
'' input {
'' color: #a7a7a7;
'' }
'' textarea:hover,
'' input:hover {
'' color: #000;
'' }
变量
- ###变量（必学）
用指定**表达式**`(这个很重要，不只是值，是表达式，表达式，表达式)`为变量，然后我们对变量贯穿使用，与js有异（jiu）曲（shi）同（mo）工（fang）之妙
''font-size = 14px
''
'' body
'' font font-size Arial, sans-seri
编译为：
''body {
'' font: 14px Arial, sans-serif;
'' }
-
属性查找（需掌握）
这是一个很厉害的功能，不需要分配值给变量就可以定义应用属性（怕不怕），下面典型例子 元素水平垂直居中对齐（典型的方法是使用百分比和margin负值）
''#logo
'' position: absolute
'' top: 50%
'' left: 50%
'' width: w = 150px
'' height: h = 80px
'' margin-left: -(w / 2)
'' margin-top: -(h / 2)上面我们是定义了 Stylus的变量，我们可以使用 变量 w 和 h ，用 @字符标记在属性名前面来获取该属性值 `@width就相当于 150px
''#logo
'' position: absolute
'' top: 50%
'' left: 50%
'' width: 150px
'' height: 80px
'' margin-left: -(@width / 2)
'' margin-top: -(@height / 2)
插值
插值（必学）
Stylus支持 {}字符包围表达式来插入值，插入的值会变成标识符的一部分
对属性插值
''vendor(prop, args)
'' -webkit-{prop} args
'' -moz-{prop} args
'' {prop} args
''
'' border-radius()
'' vendor('border-radius', arguments)
''
'' box-shadow()
'' vendor('box-shadow', arguments)
''
'' button
'' border-radius 1px 2px / 3px 4px
编译为：
''button {
'' -webkit-border-radius: 1px 2px / 3px 4px;
'' -moz-border-radius: 1px 2px / 3px 4px;
'' border-radius: 1px 2px / 3px 4px;
'' }
选择器插值（必学）
插值也可以在选择器上起作用
''table
'' for row in 1 2 3 4 5
'' tr:nth-child({row})
'' height: 10px * row
编译为：
''
''table tr:nth-child(1) {
'' height: 10px;
'' }
'' table tr:nth-child(2) {
'' height: 20px;
'' }
'' table tr:nth-child(3) {
'' height: 30px;
'' }
'' table tr:nth-child(4) {
'' height: 40px;
'' }
'' table tr:nth-child(5) {
'' height: 50px;
'' }
运算符（需学习，使你更灵活使用Stylus）
自行学习
混合书写（需学习）
-
混入
混入（·`就是方法名与css属性名一样，就可以和使用属性一样使用变量`） 和 函数定义方法一致，但是应用区别很大 这对浏览器兼容比较好，可以省略代码，但是对于我们不需要兼容项目而言用处不大，因为她的参数也要css属性赋值一样 -
方法 （必学）
像js 一样写法，但是可以不用 大括号.参数可以赋予默认值
''add(a, b)
'' a + b
'' body
'' padding add(10px, 5)
''
渲染为
''body {
'' padding: 15px;
'' }
运算时，单位不相同时取第一个数的参数进行计算，当然也可以使用 unit 忽略单位换算
条件
if 、eles if 、else、
unless（除非）
迭代（必学）
迭代
''body
'' for num in 1 2 3
'' foo num
编译成
''body {
'' foo: 1;
'' foo: 2;
'' foo: 3;
'' }
混合书写
这个例子可以应用很多地方，同一个组件中类名类似，属性相似等等
''apply(props)
'' props = arguments if length(arguments) > 1
'' for prop in props
'' {prop[0]} prop[1]
''
'' body
'' apply(one 1, two 2, three 3)
''
'' body
'' list = (one 1) (two 2) (three 3)
'' apply(list)
导入 （必学）
@import 导入 styl文件和 css文件
@media 媒体查询，与css一样
继承（必学）
Stylus的 @extend指令受sass实现的启发，基本一样
可以继承 整个类 ,这样更利于维护
''.message {
'' padding: 10px;
'' border: 1px solid #eee;
'' }
''
'' .warning {
'' @extend .message;
'' color: #E2E21E;
'' }
如果css就是这样
message,
'' .warning {
'' padding: 10px;
'' border: 1px solid #eee;
'' }
''
'' .warning {
'' color: #E2E21E;
'' }
不管什么原因，如果遇到Stylus搞不定的特殊需求，你可以使用@css使其作为CSS字面量解决之
