简洁清爽的Stylus语法

      13 分钟 读完 (大约 1943 个字)
 
前端
 
css / hexo / stylus
文章目录
  1. 1. Stylus介绍
  2. 2. 安装
  3. 3. 生成CSS
  4. 4. 应用效果
  5. 5. Flexible syntax(灵活的用法)
    1. 5.1. Flexible &(灵活&)
    2. 5.2. Functions 方法
      1. 5.2.1. 返回值
        1. 5.2.1.1. 带参数
        2. 5.2.1.2. 不带参数
      2. 5.2.2. 默认参数
        1. 5.2.2.1. 不带参数
      3. 5.2.3. 多个返回值
      4. 5.2.4. Variables(变量)
      5. 5.2.5. 变量放在属性中
    3. 5.3. 块属性访问引用
      1. 5.3.1. 属性有条件地定义属性
      2. 5.3.2. 向上冒泡
    4. 5.4. Iteration(迭代)
    5. 5.5. Interpolation(插值)
      1. 5.5.1. Operators(运算符)
      2. 5.5.2. CSS字面量(CSS Literal)

Stylus是一个基于Node.js的CSS的预处理框架。其本质上做的事情与sass/less等类似。Stylus比less更强大。icarus主题中用到了stylus。

Stylus介绍

Stylus是一个基于Node.js的CSS的预处理框架。
可以说是一种新型语言，其本质上做的事情与sass/less等类似。
Stylus比less更强大；比sass更符合我们的思路。

它是一个CSS的预处理框架，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，所以 Stylus是一种新型语言，可以创建健壮的、动态的、富有表现力的CSS。比较年轻，其本质上做的事情与 SASS/LESS 等类似，应该是有很多借鉴，所以近似脚本的方式去写CSS代码。

Stylus默认使用 .styl 的作为文件扩展名，支持多样性的CSS语法。

Stylus功能上更为强壮，和js联系更加紧密。

对于开发来说，CSS的弱点在于静态化。我们需要一个真正能提高开发效率的工具，LESS， SASS都在这方面做了一些贡献。

安装

全局安装，安装之前你需要先安装nodejs。

1
$ npm install stylus -g

苹果电脑（mac系统）以上命令或许不成功

mac系统建议以下方式进行安装

1
$ sudo npm install stylus -g

这样就算是安装完Stylus了，也可以正常使用Stylus。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Usage: stylus [options] [command] [< in [> out]]
              [file|dir ...]
Commands:
  help <prop>     Opens help info for <prop> in
                  your default browser. (OS X only)
Options:

  -u, --use <path>        Utilize the stylus plugin at <path>
  -i, --interactive       Start interactive REPL
  -w, --watch             Watch file(s) for changes and re-compile
  -o, --out <dir>         Output to <dir> when passing files
  -C, --css <src> [dest]  Convert CSS input to Stylus
  -I, --include <path>    Add <path> to lookup paths
  -c, --compress          Compress CSS output
  -d, --compare           Display input along with output
  -f, --firebug           Emits debug infos in the generated css that
                          can be used by the FireStylus Firebug plugin
  -l, --line-numbers      Emits comments in the generated CSS
                          indicating the corresponding Stylus line
  -V, --version           Display the version of Stylus
  -h, --help              Display help information

生成CSS

命令行中建立一个stylusExample/，再在里面建立 src 目录专门存放 stylus 文件，在里面建立 example.styl 文件。然后在 stylusExample 目录下面执行下面命令

1
$ stylus --compress src/

输出compiled src/example.css ，这个时候表示你生成成功了，带上–compress参数表示你生成压缩的CSS文件。

1
2
3
$ stylus --css css/example.css css/out.styl CSS转换成styl 
$ stylus help box-shadow CSS属性的帮助 
$ stylus --css test.css 输出基本名一致的.styl文件

应用效果

Try Stylus!
stylus

1
2
3
body,html
    margin:0
    padding:0

编译成

1
2
3
4
5
body,
html {
  margin: 0;
  padding: 0;
}

stylus : 强大的功能丰富的语言

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
-pos(type, args)
  i = 0
  position: unquote(type)
  {args[i]}: args[i + 1] is a 'unit' ? args[i += 1] : 0
  {args[i += 1]}: args[i + 1] is a 'unit' ? args[i += 1] : 0

absolute()
  -pos('absolute', arguments)

fixed()
  -pos('fixed', arguments)


 #prompt
  absolute: top 150px left 5px
  width: 200px
  margin-left: -(@width / 2)

 #logo
  fixed: top left

编译成

1
2
3
4
5
6
7
8
9
10
11
12
#prompt {
  position: absolute;
  top: 150px;
  left: 5px;
  width: 200px;
  margin-left: -100px;

 #logo {
  position: fixed;
  top: 0;
  left: 0;
}

nibStylus插件
stylus

1
2
3
@import 'nib'
body
  background: linear-gradient(20px top, white, black)

编译成

1
2
3
4
5
6
7
body {
  background: -webkit-linear-gradient(20px top, #fff, #000);
  background: -moz-linear-gradient(20px top, #fff, #000);
  background: -o-linear-gradient(20px top, #fff, #000);
  background: -ms-linear-gradient(20px top, #fff, #000);
  background: linear-gradient(20px top, #fff, #000);
}

Nesting(嵌套)
stylus

1
2
3
header
    #logo
        border:1px solid red

编译成

1
2
3
header #logo {
  border: 1px solid #f00;
}

Flexible syntax(灵活的用法)

更多详细示例可参考stylus中文文档，
或者stylus官方文档。

stylus

1
2
3
4
5
6
7
8
9
10
11
body
    font 14px/1.5 Helvetica, arial, sans-serif
    button
    button.button
    input[type='button']
    input[type='submit']
        border-radius 5px

header 
    #logo,div
        font-size:14px

编译成

1
2
3
4
5
6
7
8
9
10
11
12
body {
  font: 14px/1.5 Helvetica, arial, sans-serif;
}
body button,
body button.button,
body input[type='button'] {
  border-radius: 5px;
}
header #logo,
header div {
  font-size: 14px;
}

Flexible &(灵活&)

stylus

1
2
3
4
5
6
7
8
9
ul
    li a
        display: block
        color: blue
        padding: 5px
        html.ie &
            padding: 6px
        &:hover
            color: red

编译成

1
2
3
4
5
6
7
8
9
10
11
ul li a {
  display: block;
  color: #00f;
  padding: 5px;
}
html.ie ul li a {
  padding: 6px;
}
ul li a:hover {
  color: #f00;
}

Functions 方法

返回值

带参数

stylus

1
2
3
4
5
6
7
border-radius(val)
    -webkit-border-radius: val
    -moz-border-radius: val
    border-radius: val

button 
    border-radius(5px);

编译成

1
2
3
4
5
6
button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
Transparent mixins

不带参数

stylus

1
2
3
4
5
6
7
border-radius()
    -webkit-border-radius: arguments
    -moz-border-radius: arguments
    border-radius: arguments

button 
    border-radius: 5px 10px;

编译成

1
2
3
4
5
button {
  -webkit-border-radius: 5px 10px;
  -moz-border-radius: 5px 10px;
  border-radius: 5px 10px;
}

默认参数

不带参数

1
2
3
4
5
6
7
8
9
10
11
stylus

add(a, b = a)
  a + b

add(10, 5)
// => 15

add(10)
// => 20
函数体

通过内置unit()把单位都变成px, 因为赋值在每个参数上，因此，我们可以无视单位换算。

1
2
3
4
5
6
7
add(a, b = a)
  a = unit(a, px)
  b = unit(b, px)
  a + b

add(15%, 10deg)
// => 25

多个返回值

通过内置unit()把单位都变成px, 因为赋值在每个参数上，因此，我们可以无视单位换算。

1
2
3
4
5
sizes()
 15px 10px

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

Variables(变量)

常用方法
stylus

1
2
3
font-size = 14px
body
    font font-size Arial, sans-seri

编译成

1
2
3
body {
  font: 14px Arial, sans-seri;
}

变量放在属性中

stylus

1
2
3
4
5
6
#prompt
   position: absolute
   top: 150px
   left: 50%
   width: w = 200px
   margin-left: -(w / 2)

编译成

1
2
3
4
5
6
7
 #prompt {
  position: absolute;
  top: 150px;
  left: 50%;
  width: 200px;
  margin-left: -100px;
}

块属性访问引用

stylus

1
2
3
4
#prompt
   position: absolute
   width: 200px
   margin-left: -(@width / 2)

编译成

1
2
3
4
5
 #prompt {
  position: absolute;
  width: 200px;
  margin-left: -100px;
}

属性有条件地定义属性

stylus:指定z-index值为1，但是，只有在z-index之前未指定的时候才这样：

1
2
3
4
5
6
7
8
position()
  position: arguments
  z-index: 1 unless @z-index
 #logo
  z-index: 20
  position: absolute
 #logo2
  position: absolute

编译成

1
2
3
4
5
6
7
8
 #logo {
  z-index: 20;
  position: absolute;
}
 #logo2 {
  position: absolute;
  z-index: 1;
}

向上冒泡

stylus:属性会“向上冒泡”查找堆栈直到被发现，或者返回null（如果属性搞不定）下面这个例子，@color被弄成了blue.

1
2
3
4
5
6
7
body
  color: red
  ul
    li
      color: blue
      a
        background-color: @color

编译成

1
2
3
4
5
6
7
8
9
body {
  color: #f00;
}
body ul li {
  color: #00f;
}
body ul li a {
  background-color: #00f;
}

Iteration(迭代)

stylus

1
2
3
4
table
    for row in 1 2 3 4 5
        tr:nth-child({row})
            height: 10px * row

编译成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
table tr:nth-child(1) {
  height: 10px;
}
table tr:nth-child(2) {
  height: 20px;
}
table tr:nth-child(3) {
  height: 30px;
}
table tr:nth-child(4) {
  height: 40px;
}
table tr:nth-child(5) {
  height: 50px;
}

Interpolation(插值)

stylus

1
2
3
4
5
6
7
8
9
vendors = webkit moz o ms official
border-radius()
    for vendor in vendors
        if vendor == official
            border-radius: arguments
        else
            -{vendor}-border-radius: arguments
#content
    border-radius: 5px

编译成

1
2
3
4
5
6
7
#content {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}

Operators(运算符)

运算符优先级：下表运算符优先级，从最高到最低：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.
 []
 ! ~ + -
 is defined
 ** * / %
 + -
 ... ..
 <= >= < >
 in
 == is != is not isnt
 is a
 && and || or
 ?:
 = := ?= += -= *= /= %=
 not
 if unless
@import
@import "reset.css"

当使用@import没有.css扩展，会被认为是Stylus片段（如：@import “mixins/border-radius”）。

@import工作原理为：遍历目录队列，并检查任意目录中是否有该文件（类似node的require.paths）。该队列默认为单一路径，从filename选项的dirname衍生而来。 因此，如果你的文件名是/tmp/testing/stylus/main.styl，导入将显现为/tmp/testing/stylus/。

@import也支持索引形式。这意味着当你@import blueprint, 则会理解成blueprint.styl或blueprint/index.styl. 对于库而言，这很有用，既可以展示所有特征与功能，同时又能导入特征子集。

@font-face
stylus

1
2
3
4
5
6
@font-face
  font-family Geo
  font-style normal
  src url(fonts/geo_sans_light/GensansLight.ttf)
.ingeo
  font-family Geo

编译成

1
2
3
4
5
6
7
8
9
@font-face { 
font-family: Geo; 
font-style: normal; 
src: url(“fonts/geo_sans_light/GensansLight.ttf”); 
} 
.ingeo { 
font-family: Geo; 
} 
@media

stylus

1
2
3
4
@media print 
#header 
#footer 
display none

编译成

1
2
3
4
5
6
7
@media print { 
#header, 
#footer { 
display: none; 
} 
} 
@keyframes

stylus

1
2
3
4
5
6
7
@keyframes pulse
    0%
      background-color red
      transform scale(1.0) rotate(0deg)
    33%
      background-color blue
      -webkit-transform scale(1.1) rotate(-5deg)

编译成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
@-moz-keyframes pulse {
  0% {
    background-color: #f00;
    transform: scale(1) rotate(0deg);
  }
  33% {
    background-color: #00f;
    -webkit-transform: scale(1.1) rotate(-5deg);
  }
}
@-webkit-keyframes pulse {
  0% {
    background-color: #f00;
    transform: scale(1) rotate(0deg);
  }
  33% {
    background-color: #00f;
    -webkit-transform: scale(1.1) rotate(-5deg);
  }
}
@-o-keyframes pulse {
  0% {
    background-color: #f00;
    transform: scale(1) rotate(0deg);
  }
  33% {
    background-color: #00f;
    -webkit-transform: scale(1.1) rotate(-5deg);
  }
}
@keyframes pulse {
  0% {
    background-color: #f00;
    transform: scale(1) rotate(0deg);
  }
  33% {
    background-color: #00f;
    -webkit-transform: scale(1.1) rotate(-5deg);
  }
}

CSS字面量(CSS Literal)

stylus

1
2
3
4
5
@css {
  body {
    font: 14px;
  }
}

编译成

1
2
3
body {
  font: 14px;
}

# css, hexo, stylus

本文总阅读量次

Could you buy me a coffee?

git修改已提交的备注
O(n)算法查找第k大的数

评论

最新文章

归档

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×