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

原创 2017年01月02日 20:50:06

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
版权声明:本文为博主原创文章,未经博主允许不得转载。

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

stylus1、安装与自动编译 新建example文件夹 新建/example/dist文件夹 打开命令行界面 输入 stylus -w demo.styl -o dist -w 是自动监视...
  • qq_32389745
  • qq_32389745
  • 2017年01月02日 19:47
  • 1016

stylus入门使用方法

stylus介绍是个什么鬼?对于开发来说,CSS的弱点在于静态化。我们需要一个真正能提高开发效率的工具,LESS, SASS都在这方面做了一些贡献。Stylus 是一个CSS的预处理框架,2010年产...
  • zc639143029
  • zc639143029
  • 2017年05月22日 21:03
  • 807

npm安装stylus和stylus-loader

去到 package.json随便找个地方加上下面这两句话 "stylus-loader": "^3.0.1", "stylus": "0.52.4", 然后去 cmd  运行 cnpm i...
  • echo_Ae
  • echo_Ae
  • 2017年06月27日 11:47
  • 4989

stylus之选择器(Selectors)

选择器(Selectors)
  • tian361zyc
  • tian361zyc
  • 2017年05月26日 15:58
  • 1024

Error:Cannot find module 'stylus'

在webpack 里面用了 stylus-loader,但npm instatll 没有正确安装,出现error: Cannot find module ‘stylus’。解决办法: 重新npm i...
  • xianyu_Padding
  • xianyu_Padding
  • 2017年05月25日 21:32
  • 2644

stylus用法

stylusstylus是一款 CSS 的预处理器,使用它可以创建健壮的、动态的、富有表现力的CSS。用法# install npm install stylus -g# watch and comp...
  • hui1yuan
  • hui1yuan
  • 2017年05月09日 17:13
  • 387

Css预处理-sass、less和stylus的安装使用和入门实践

能。 注:LESS的官网:http://lesscss.org 3.Stylus背景介绍 Stylus,2010年产生,来自于Node.JS社区,主要用来给Node项目进行CSS预处理支持,在此...
  • sinat_28990325
  • sinat_28990325
  • 2015年11月25日 22:58
  • 660

stylus调用mixin函数

新建mixin.styl bg-image($url) background-image: url($url + "@2x.png")在css中调用 .icon margin-top...
  • tjzc1352640
  • tjzc1352640
  • 2017年10月25日 20:31
  • 286

sublime 添加ejs,less,stylus高亮

在使用sublime的时候,需要给他加点新的工具,一些Package,但具体怎么实现呢,下面讲一个简单的:...
  • u014491743
  • u014491743
  • 2016年04月29日 23:31
  • 4834

在stylus格式的图标字体里url无法解析

问题最近在使用Vue开发时 使用了icmoon生成的字体图标,但是引入项目文件后一直报错。我尝试了使用stylus引用、CSS引用 都不可以。解决方式后来尝试把font资源放在static文件下,使...
  • lvchenqiang_
  • lvchenqiang_
  • 2017年12月17日 18:08
  • 125
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Stylus入门教程--实例(2)
举报原因:
原因补充:

(最多只允许输入30个字)