zoukankan      html  css  js  c++  java
  • stylus笔记(二)

    1.方法

    函数  Stylus强大之处就在于其内置的语言函数定义。其定义与混入(mixins)一致;却可以返回值。

    默认参数

    可选参数往往有个默认的给定表达。在Stylus中,我们甚至可以超越默认参数。

    例如:

    add(a, b = a)
      a + b
    
    add(10, 5)
    // => 15
    
    add(10)
    // => 20

    注意:因为参数默认是赋值,我们可可以使用函数调用作为默认值。

    add(a, b = unit(a, px))
      a + b

    函数体

    我们可以把简单的add()方法更进一步。通过内置unit()把单位都变成px, 因为赋值在每个参数上,因此,我们可以无视单位换算。

    add(a, b = a)
      a = unit(a, px)
      b = unit(b, px)
      a + b
    
    add(15%, 10deg)
    // => 25
    多个返回值

    Stylus的函数可以返回多个值,就像你给变量赋多个值一样。

    例如,下面就是一个有效赋值:

    sizes = 15px 10px
    
    sizes[0]
    // => 15px
    类似的,我们可以在函数中返回多个值:
    
    sizes()
     15px 10px
    
    sizes()[0]
    // => 15px
    有个小小的例外就是返回值是标识符。例如,下面看上去像一个属性赋值给Stylus(因为没有操作符)。
    
    swap(a, b)
      b a
    为避免歧义,我们可以使用括号,或是return关键字。
    
    swap(a, b)
      (b a)
    
    swap(a, b)
      return b a

    条件  使用yes和no代替true 和false 注意:yesno并不是布尔值。本例中,它们只是简单的未定义标识符。

    stringish(val)
      if val is a 'string' or val is a 'ident'
        yes
      else
        no
    使用:
    
    stringish('yay') == yes
    // => true
    
    stringish(yay) == yes
    // => true
    
    stringish(0) == no
    // => true
    其他例子:
    compare(a, b)
      if a > b
        higher
      else if a < b
        lower
      else
        equal

    变量函数 即把函数当作变量传递到新的函数中  

    invoke(a, b, fn)
      fn(a, b)

    参数

    arguments是所有函数体都有的局部变量,包含传递的所有参数。

    sum()
      n = 0
      for num in arguments
        n = n + num
    
    sum(1,2,3,4,5)
    // => 15

    哈希示例

    定义get(hash, key)方法,用来返回key值或null. 我们遍历每个键值对,如果键值匹配,返回对应的值。

    get(hash, key)
      return pair[1] if pair[0] == key for pair in hash
    下面例子可以证明,语言函数模样的Stylus表达式具有更大的灵活性。
    
    hash = (one 1) (two 2) (three 3)
    
    get(hash, two)
    // => 2
    
    get(hash, three)
    // => 3
    
    get(hash, something)
    // => null

    2. 关键字参数

    查看函数或混合书写中接受的参数,可以使用p()方法。

    3.内置方法

    red(color)      green(color)      blue(color)   alpha(color)  返回color中的颜色比重,透明度比重

    alpha(#fff)
    // => 1

    dark(color)  检查color是否是暗色   light(color)  检查color是否是亮色  hue(color)  返回给定color的色调   saturation(color)  返回给定color的饱和度  lightness(color)  返回给定color的亮度

    hue(hsla(50deg, 100%, 80%))
    // => 50deg
    
    saturation(hsla(50deg, 100%, 80%))
    // => 100%
    
    lightness(hsla(50deg, 100%, 80%))
    // => 80%

    push(expr,args...)   别名append()  unshift(expr,args) 别名prepend() 

    nums = 1 2
    push(nums, 3, 4, 5)
    
    nums
    // => 1 2 3 4 5
    nums = 4 5
    
    unshift(nums, 3, 2, 1)
    
    nums
    // => 1 2 3 4 5

    keys(pairs),values(pairs)  返回Paris中的键 值。

    pairs = (one 1) (two 2) (three 3)
    keys(pairs)
    // => one two three

    typeof(node)  别名有type-oftype。  unit(unit[, type])  

    返回unit类型的字符串或空字符串,或者赋予type值而无需单位转换。

    type(12)
    // => 'unit'
    
    typeof(12)
    // => 'unit'
    
    typeof(#fff)
    // => 'rgba'
    
    type-of(#fff)
    // => 'rgba'
    
    unit(10)
    // => ''
    
    unit(15in)
    // => 'in'
    
    unit(15%, 'px')
    // => 15px
    
    unit(15%, px)
    // => 15px

    match(pattern, string) 检测string是否匹配给定的pattern.  abs(unit) 绝对值   ceil(unit)floor(unit) 向上,下取整  round(unit) 四舍五入取整  even(unit)是否为偶数 odd(unit) 是否为奇数

    match('^foo(bar)?', 'bar')
    // => false
    match('^foo(bar)?', foobar)
    // => true

    此外还有sum, avg. length().

    join(delim, vals...) 给定vals使用delim连接

    join(', ', foo, bar, baz)
    // => "foo, bar, baz"

    invert(color) 颜色反相。红绿蓝颜色反转,透明度不变。  unquote(str | ident)  给定str引号去除,返回Literal节点。

     s(fmt, …) s()方法类似于unquote(),不过后者返回的是Literal节点,而这里起接受一个格式化的字符串,非常像C语言的sprintf(). 目前,唯一标识符是%s.

    unquote("sans-serif")
    // => sans-serif
    
    s('bar()');
    // => bar()
    
    s('bar(%s)', 'baz');
    // => bar("baz")
    
    s('bar(%s)', baz);
    // => bar(baz)
    
    s('rgba(%s, %s, %s, 0.5)', 255, 100, 50);
    // => rgba(255, 100, 50, 0.5)
    
    s('bar(%Z)', 15px);
    // => bar(%Z)
    
    s('bar(%s, %s)', 15px);
    // => bar(15px, null)

    operate(op,left,right) 在leftright操作对象上执行给定的op.

    op = '+'
    operate(op, 15, 5)
    // => 20

    warm(msg) 使用给定的error警告,并不退出。  error(msg)伴随给定的错误msg退出。last(expr) 返回给定expr的最后一个值。

    p(expr) 检查,类似得到确定信息

    p(fonts)
    inspect: Arial, sans-serif

    opposite-position(positions) 返回给定position相反内容

    opposite-position(top left)
    // => bottom right

    image-size(path) 返回指定path图片的widthheight. 向上查找路径的方法和@import一样,paths设置的时候改变。

    width(img)
      return image-size(img)[0]
    
    height(img)
      return image-size(img)[1]
    
    image-size('tux.png')
    // => 405px 250px
    
    image-size('tux.png')[0] == width('tux.png')
    // => true

    add-property(name, expr) 使用给定的expr为最近的块域添加属性name

    something()
      add-property('bar', 1 2 3)
      s('bar')
    
    body
      foo: something()
    真实面目:
    
    body {
      bar: 1 2 3;
      foo: bar;
    }
    接下来,“神奇”的current-property局部变量将大放异彩,这个变量自动提供给函数体,且包含当前属性名和值的表达式。
    
    例如,我们使用p()检查这个局部变量,我们可以得到:
    
    p(current-property)
    // => "foo" (foo __CALL__ bar baz)
    
    p(current-property[0])
    // => "foo"
    
    p(current-property[1])
    // => foo __CALL__ bar baz

    Stylus支持name...形式的其余参数。这些参数可以消化传递给混写或函数的参数们。这在处理浏览器私有属性,如-moz-webkit的时候很管用。

    下面这个例子中,所有的参数们(1px, 2px, ...)都被一个args参数给简单消化了:

    box-shadow(args...)
      -webkit-box-shadow args
      -moz-box-shadow args
      box-shadow args
    
    #login
      box-shadow 1px 2px 5px #eee
    生成为:
    
    #login {
      -webkit-box-shadow: 1px 2px 5px #eee;
      -moz-box-shadow: 1px 2px 5px #eee;
      box-shadow: 1px 2px 5px #eee;
    }

    我们想指定特定的参数,如x-offset,我们可以使用args[0], 或者,我们可能希望重新定义混入。

    2.注释

    Stylus支持三种注释,单行注释,多行注释,以及多行缓冲注释。

    单行:跟JavaScript一样,双斜杠,CSS中不输出。  多行:多行注释看起来有点像CSS的常规注释。然而,它们只有在compress选项未启用的时候才会被输出。

    多行缓冲:跟多行注释类似,不同之处在于开始的时候,这里是/*!. 这个相当于告诉Stylus压缩的时候这段无视直接输出。

    /*!
     * 给定数值合体
     */
    
    add(a, b)
      a + b

    3.条件

    if/else 同一般的语言

    除非 unless , 其基本上与if相反,本质上是(!(expr)).

    下面这个例子中,如果disable-padding-overrideundefinedfalsepadding将被干掉,显示margin代替之。但是,如果是truepadding将会如期继续输出padding 5px 10px.

    disable-padding-override = true
    
    unless disable-padding-override is defined and disable-padding-override
      padding(x, y)
        margin y x
    
    body
      padding 5px 10px

    后缀条件 

    Stylus支持后缀条件,这就意味着ifunless可以当作操作符;当右边表达式为真的时候执行左边的操作对象。

    例如,我们定义negative()来执行一些基本的检查:

    negative(n)
      error('无效数值') unless n is a 'unit'
      return yes if n < 0
      no
    pad(types = margin padding, n = 5px)
      padding unit(n, px) if padding in types
      margin unit(n, px) if margin in types
    
    body
      pad()
    
    body
      pad(margin)
    
    body
      apply-mixins = true
      pad(padding, 10) if apply-mixins
    生成为:
    
    body {
      padding: 5px;
      margin: 5px;
    }
    body {
      margin: 5px;
    }
    body {
      padding: 10px;
    }

    4.迭代

    Stylus允许你通过for/in对表达式进行迭代形式如下:

    for <val-name> [, <key-name>] in <expression>
    body
      fonts = Impact Arial sans-serif
      for font, i in fonts
        foo i font
    生成为:
    
    body {
      foo: 0 Impact;
      foo: 1 Arial;
      foo: 2 sans-serif;
    }
  • 相关阅读:
    Python入门11 —— 基本数据类型的操作
    Win10安装7 —— 系统的优化
    Win10安装6 —— 系统的激活
    Win10安装5 —— 系统安装步骤
    Win10安装4 —— 通过BIOS进入PE
    Win10安装2 —— 版本的选择与下载
    Win10安装1 —— 引言与目录
    Win10安装3 —— U盘启动工具安装
    虚拟机 —— VMware Workstation15安装教程
    Python入门10 —— for循环
  • 原文地址:https://www.cnblogs.com/aimeeblogs/p/9509942.html
Copyright © 2011-2022 走看看