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字面量解决之

最后编辑于：2017.12.05 00:45:35