简洁清爽的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等类似。Stylusless更强大。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;
}

本文总阅读量

评论

Your browser is out-of-date!

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

×