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 注意：yes和no并不是布尔值。本例中，它们只是简单的未定义标识符。

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-of和type。 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）在left和right操作对象上执行给定的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图片的width和height. 向上查找路径的方法和@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-override是undefined或false, padding将被干掉，显示margin代替之。但是，如果是true, padding将会如期继续输出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支持后缀条件，这就意味着if和unless可以当作操作符；当右边表达式为真的时候执行左边的操作对象。

例如，我们定义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;

}

巴特西

stylus笔记（二）

默认参数

多个返回值

最新文章

热门文章