关闭

Stylus入门教程--实例(2)

标签: 函数实例stylus入门css
72人阅读 评论(0) 收藏 举报
分类:

1、函数(function)

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

  • 多个返回值
sizes = 15px 10px

sizes[0]
// => 15px
sizes()
 15px 10px

sizes()[0]
// => 15px
  • 难点:哈希示例

下面,我们定义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、关键字参数(key arguments)

Stylus支持关键字参数,或”kwargs”. 允许你根据相关参数名引用参数。

下面这些例子功能上都是一样的。但是,我们可以在列表中的任何地方放置关键字参数。其余不键入参数将适用于尚未得到满足的参数。

body {
  color: rgba(255, 200, 100, 0.5);
  color: rgba(red: 255, green: 200, blue: 100, alpha: 0.5);
  color: rgba(alpha: 0.5, blue: 100, red: 255, 200);
  color: rgba(alpha: 0.5, blue: 100, 255, 200);
}

编译为

body {
   color: rgba(255,200,100,0.5);
   color: rgba(255,200,100,0.5);
   color: rgba(255,200,100,0.5);
   color: rgba(255,200,100,0.5);
}

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

p(rgba)

生成

inspect: rgba(red, green, blue, alpha)

3、内置方法(Built-in Functions)
- 返回颜色比重

red(#c00)
// =>204

类似的还有green(color)、blue(color)、alpha(color)

  • 检查color是否是暗色:dark(color)
dark(black)
// => true

dark(#005716)
// => true

dark(white)
// => false
  • 检查color是否为亮色:light(color)
light(black) // => false

light(white) // => true

light(#00FF40) // => true
  • 返回颜色的色调:hue(color)
hue(hsla(50deg, 100%, 80%))
// => 50deg

类似的还有:staturation(color)饱和度、lightness(color)亮度

push(expr, args…)

后面推送给定的argsexpr.

nums = 1 2
push(nums, 3, 4, 5)

nums
// => 1 2 3 4 5

别名为append()
unshift(expr, args…)

起始位置插入给定的argsexpr.

nums = 4 5
unshift(nums, 3, 2, 1)

nums
// => 1 2 3 4 5

别名为prepend().

重点:

unit(unit[, type])

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

unit(10)
// => ''

unit(15in)
// => 'in'

unit(15%, 'px')
// => 15px

unit(15%, px)
// => 15px

p(expr)

检查给定的expr.

fonts = Arial, sans-serif
p('test')
p(123)
p((1 2 3))
p(fonts)
p(#fff)
p(rgba(0,0,0,0.2))

add(a, b)
  a + b

p(add)

标准输出:

inspect: "test"
inspect: 123
inspect: 1 2 3
inspect: Arial, sans-serif
inspect: #fff
inspect: rgba(0,0,0,0.2)
inspect: add(a, b)

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;
}

4、注释(comments)

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

/*
 * 给定数值合体
 */

add(a, b)
  a + b

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

/*!
 * 给定数值合体
 */

add(a, b)
  a + b
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:663次
    • 积分:36
    • 等级:
    • 排名:千里之外
    • 原创:3篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档