stylus进一步补充更新 更强大

1. Stylus介绍
   Stylus是一个CSS的预处理框架，Stylus是一种新型语言，可以创建健壮的、动态的、富有表现力的CSS。

什么是CSS预处理技术？CSS预处理技术，是指用一种新语言用来为CSS 增加可编程的的特性，无需考虑浏览器的兼容性问题。你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更见简洁，适应性更强。

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

增加两个文件:

stylus.js: 启动命令，渲染stylus的文件，在命令打印渲染后的结果
stylus.styl: stylus可编程的样式文件
增加stylus.js文件

~ vi stylus.js

var stylus = require(“stylus”),
str = require(“fs”).readFileSync(“public/stylus/stylus.styl”, “utf8”);

stylus.render(str,function (err, css) {
if (err) throw err;
console.log(css);
});
增加public/stylus/stylus.styl文件

~ vi public/stylus/stylus.styl

border-radius()
-webkit-border-radius: arguments
-moz-border-radius: arguments
border-radius: arguments

body a
display inline-block
padding: 2px 5px
font: 12px/1.4 Arial, sans-serif
background: black
color: #eee
border-radius: 2px

form input
padding: 5px
border: 1px solid
border-radius: 5px
运行stylus.js的命令

~ D:\workspace\javascript\nodejs-stylus>node stylus.js

body a {
display: inline-block;
padding: 2px 5px;
font: 12px/1.4 Arial, sans-serif;
background: #000;
color: #eee;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
form input {
padding: 5px;
border: 1px solid;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
我们看到了stylus的渲染效果，通过可编程的stylus.styl文件，生成标准的CSS的样式。接下来，我们继续看Stylus的基本使用。

3. Stylus语法
   1). 选择器(Selectors)

body
color white
==>
body {
color: #fff;
}

pad(n)
padding (- n)
body
pad(5px)
==>
body {
padding: -5px;
}

foo bar baz,
form input,

a
border 1px solid
==>
foo bar baz,
form input,
a {
border: 1px solid;
}

textarea
input
color #A7A7A7
&:hover
color #000
==>
textarea,
input {
color: #a7a7a7;
}
textarea:hover,
input:hover {
color: #000;
}
2). 变量(Variables)

font-size = 14px
body
font font-size Arial, sans-seri
==>
body {
font: 14px Arial, sans-seri;
}

#logo
position: absolute
top: 50%
left: 50%
width: 150px
height: 80px
margin-left: -(@width / 2)
margin-top: -(@height / 2)
==>
#logo {
position: absolute;
top: 50%;
left: 50%;
width: 150px;
height: 80px;
margin-left: -75px;
margin-top: -40px;
}

body
color: red
ul
li
color: blue
a
background-color: @color
==>
body {
color: #f00;
}
body ul li {
color: #00f;
}
body ul li a {
background-color: #00f;
}
3). 插值(Interpolation)

vendor(prop, args)
-webkit-{prop} args
-moz-{prop} args
{prop} args
button
border-radius 1px 2px / 3px 4px
==>
button {
border-radius: 1px 2px/3px 4px;
}

table
for row in 1 2 3 4 5
tr:nth-child({row})
height: 10px * row
==>
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;
}
4). 运算符(Operators)

body
n = 5
foo: (n)em
foo: (n)%
foo: (n * 5)px
foo: unit(n + 5, ‘%’)
==>
body {
foo: 5em;
foo: 5%;
foo: 25px;
foo: 10%;
}

a = 15px
div
if a is defined
padding 5px
if b
margin 5px
==>
div {
padding: 5px;
margin: 5px;
}

pad(types = padding, n = 5px)
if padding in types
padding n
if margin in types
margin n
body
pad()
body
pad(margin)
body
pad(padding margin, 10px)
==>
body {
padding: 5px;
}
body {
margin: 5px;
}
body {
padding: 10px;
margin: 10px;
}
5). 混合书写(Mixins)

border-radius(n)
-webkit-border-radius n
-moz-border-radius n
border-radius n
form input[type=button]
border-radius 5px
==>
form input[type=button] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

support-for-ie ?= true
opacity(n)
opacity n
if support-for-ie
filter unquote(‘progid:DXImageTransform.Microsoft.Alpha(Opacity=’ + round(n * 100) + ‘)’)
#logo
&:hover
opacity 0.5
==>
#logo:hover {
opacity: 0.5;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
}

inline-list()
li
display inline
comma-list()
inline-list()
li
&:after
content ', ’
&:last-child:after
content ‘’
ul
comma-list()
==>
ul li {
display: inline;
}
ul li:after {
content: ', ';
}
ul li:last-child:after {
content: ‘’;
}
6). 方法(Functions)

invoke(a, b, fn)
fn(a, b)
add(a, b)
a + b
body
padding invoke(5, 10, add)
padding invoke(5, 10, sub)
==>
body {
padding: 15;
padding: fn(5, 10);
}

get(hash, key)
return pair[1] if pair[0] == key for pair in hash
div
hash = (one 1) (two 2) (three 3)
padding:get(hash, two)
==>
div {
padding: 2;
}
7). 关键字参数(Keyword Arguments)

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(rgba)
==>
inspect: rgba(red, green, blue, alpha)
8). 内置方法(Built-in Functions)

red(#c00)
green(#0c0)
blue(#00c)
alpha(rgba(0,0,0,0.3))
dark(black)
light(white)
hue(hsla(50deg, 100%, 80%))
saturation(hsla(50deg, 100%, 80%))
lightness(hsla(50deg, 100%, 80%))

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

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

pairs = (one 1) (two 2) (three 3)
keys(pairs)
values(pairs)

typeof(12)
typeof(#fff)

unit(15in)
unit(10%,px)

match(’^foo(bar)?’, foo)
match(’^foo(bar)?’, foobar)

abs(-5px)
ceil(5.5in)
floor(5.6px)
round(5.5px)
min(1, 5)
max(1, 5)
even(6px)
odd(5mm)
sum(1 2 3)
avg(1 2 3)
join(’,’, 1 2 3)

hsla(10, 50, 30)
rgba(255,0,0,1)
rgb(255,204,0)
#fc08
lighten(#2c2c2c, 30)
darken(#D62828, 30)
desaturate(#f00, 40%)
saturate(#c33, 40%)
invert(#d62828)

unquote(“sans-serif”)
s(‘bar()’)
s(‘bar(%s)’, ‘baz’)
warn(“oh noes!”)
error(‘add() expects units’)

op = ‘+’
operate(op, 15, 5)
last(1 2 3)
length((1 2 3 4))
p(‘test’)
opposite-position(right)

image-size(‘tux.png’)
add-property(‘bar’, 1 2 3)
stop(50%, orange)
9). 多参数(Rest Params)

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

box-shadow()
-webkit-box-shadow arguments
-moz-box-shadow arguments
box-shadow arguments
#login
box-shadow #ddd 1px 1px, #eee 2px 2px
==>
#login {
-webkit-box-shadow: #ddd 1px 1px, #eee 2px 2px;
-moz-box-shadow: #ddd 1px 1px, #eee 2px 2px;
box-shadow: #ddd 1px 1px, #eee 2px 2px;
}
10). 注释(Comments)

// one line
==>

/*

• multi-line
  /
  ==>
  /
• multi-line
  */

/*!

• multi-line buffered
  /
  ==>
  /
• multi-line buffered
  */
  11). 条件(Conditionals)

box(x, y, margin-only = false)
if margin-only
margin y x
else
padding y x
div
box(5px, 10px, true)
==>
div {
margin: 10px 5px;
}

negative(n)
error(‘invalid num’) unless n is a ‘unit’
return yes if n < 0 no negative(15) ==> no
negative(‘str’)
==>
invalid num
at negative() (stylus:173)
12). 迭代(Iteration)

apply(props)
props = arguments if length(arguments) > 1
for prop in props
{prop[0]} prop[1]
body
apply(one 1, two 2, three 3)
==>
body {
one: 1;
two: 2;
three: 3;
}
body
list = (one 1) (two 2) (three 3)
apply(list)
==>
body {
one: 1;
two: 2;
three: 3;
}

first-even(nums)
return n if n % 2 == 0 for n in nums
div
padding first-even(1 3 5 5 6 3 2)px
==>
div {
padding: 6px;
}
13). @import,@media,@font-face, @keyframes, @extend,@css

//样式文件导入
@import “reset.css” //原始css导入
@import ‘mixins/vendor’//stylus动态导入

//与标准CSS一样
@media print
#header
#footer
display none

//与标准CSS一样
@font-face
font-family Geo
font-style normal
src url(fonts/geo_sans_light/GensansLight.ttf)

//@keyframes没用过不知道干什么的！汗！
vendors = official
@keyframes foo {
from {
color: black
}
to {
color: white
}
}
==>
@keyframes foo {
0% {
color: #000;
}
100% {
color: #fff;
}
}

//@extend样式
.message {
padding: 10px;
border: 1px solid #eee;
}
.warning {
@extend .message;
color: #E2E21E;
}
==>
.message,
.warning {
padding: 10px;
border: 1px solid #eee;
}
.warning {
color: #e2e21e;
}

//@css不转义，直接输出字符串
@css {
body {
font: 14px;
}
}
==>
body {
font: 14px;
}
14). 自检API(Introspection API)

reset()
if mixin == ‘root’
got
root true
else if mixin
got ‘a mixin’
else
‘not a mixin’
reset()
body
reset()
foo reset()
==>
got {
root: true;
}
body {
got: ‘a mixin’;
foo: ‘not a mixin’;
}
5. 在线体验和资源
作者提供了在线体验的应用：http://learnboost.github.io/stylus/try.html

中文资源：http://www.zhangxinxu.com/jq/stylus/