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;
}
原文地址:https://www.cnblogs.com/aimeeblogs/p/9509942.html