• 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;
    }
  • 相关阅读:
    JavaScript之闭包
    JavaScript之原型模式
    .NET Core3.1 解决跨域问题 Startup的配置
    .NTE Core 使用Editor.md富文本编辑器上传图片
    .NET Core3.1 WebApi 配置Swagger 超详细办法
    C#添加写日志,记录单个变量
    一个让我痛不欲生的算法题
    用EF 搭建底层
    用Linq To SQL 搭建底层
    安卓端腾讯QQ-【我的电脑】下载地址
  • 原文地址:https://www.cnblogs.com/aimeeblogs/p/9509942.html
Copyright © 2020-2023  润新知