您的位置：首页

stylus使用文档总结：内置方法+参数+条件+迭代+导入+继承

2018-04-23 00:11 531 查看

一、内置方法

　　返回各种颜色的比重（如red(color)等）

　　颜色函数是CSS预处里器中内置的颜色函数功能，这些功能可以对颜色值进行处理，例如颜色的变亮、变暗、渐变颜色等处理十分的方便。

lighten(color, 10%); /* 返回的颜色在'color'基础上变亮10% */
darken(color, 10%);  /* 返回的颜色在'color'基础上变暗10% */
saturate(color, 10%);   /* 返回的颜色在'color'基础上饱和度增加10% */
desaturate(color, 10%); /* 返回的颜色在'color'基础上饱和度降低10% */


　　keys(pairs)/values(pairs)：返回给定
pairs
中的键/值

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


　　typeof(node)：字符串形式返回
node
类型

typeof(12)
// => 'unit'
typeof(#fff)
// => 'rgba'


　　反正很多，不细说，用到的时候再查

二、其余参数(Rest Params)

1、其余参数：Stylus支持
name...
形式的其余参数（rest风格参数）。这些参数可以消化传递给混写或函数的参数们。这在处理浏览器私有属性，如
-moz
或
-webkit
的时候很管用。下面这个例子中，所有的参数们(1px, 2px, ...)都被一个
args
参数给简单消化

box-shadow(args...)
-webkit-box-shadow args
-moz-box-shadow args
box-shadow args

#login
box-shadow 1px 2px 5px #eee


2、参数们：
arguments
变量可以实现表达式的精确传递，包括逗号等等。这可以弥补
args...
参数的一些不足，见下面的例子：

box-shadow(args...)
-webkit-box-shadow args
-moz-box-shadow args
box-shadow args
#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;
}
//逗号给忽略了。我们现在使用arguments重新定义这个混合书写。
box-shadow()
-webkit-box-shadow arguments
-moz-box-shadow arguments
box-shadow arguments
body
box-shadow #ddd 1px 1px, #eee 2px 2px
//于是，一下子雨过天晴了：
body {
-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;
}


三、注释

　　单行和多行注释跟js一样

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

/*!
* 给定数值合体
*/
add(a, b)
a + b


四、条件

　　if / else if / else，没什么好说的

　　除非(unless)：熟悉Ruby程序语言的用户应该都知道
unless
条件，其基本上与
if
相反，本质上是
(!(expr))
。

　　后缀条件：Stylus支持后缀条件，这就意味着
if
和
unless
可以当作操作符；当右边表达式为真的时候执行左边的操作对象。

五、迭代(Iteration)

　　Stylus允许你通过
for/in
对表达式进行迭代形式如下：for <val-name> [, <key-name>] in <expression>

body
fonts = Impact Arial sans-serif
for font, i in fonts
foo i font
//生成为：
body {
foo: 0 Impact;
foo: 1 Arial;
foo: 2 sans-serif;
}


　　函数(Functions)：Stylus函数同样可以包含for循环。下面就是简单使用示例：

//求和：
sum(nums)
sum = 0
for n in nums
sum += n
sum(1 2 3)// => 6

//连接：
join(delim, args)
buf = ''
for arg, index in args
if index
buf += delim + arg
else
buf += arg

join(', ', foo bar baz)
// => "foo, bar, baz"


　　后缀(Postfix)：就跟
if
/
unless
可以利用后面语句一样，
for
也可以。

sum(nums)
sum = 0
sum += n for n in nums

join(delim, args)
buf = ''
buf += i ? delim + arg : arg for arg, i in args


六、导入(@import)

　　在CSS中，并不喜欢用@import来导入样式，因为这样的做法会增加HTTP的请求。但是在CSS预处理器中的导入（@import）规则和CSS的有所不同，它只是在语义上导入不同的文件，但最终结果是生成一个CSS文件。如果你是通过“@import 'file.css'”导入“file.css”样式文件，那效果跟普通CSS导入样式文件一样。

　　注意：导入文件中定义了变量、混合等信息也将会被引入到主样式文件中，因此需要避免他们的相互冲突。

/* file.{type} */
body {
background: #EEE;
}

@import "reset.css";
@import "file.{type}";
p {
background: #0982C1;
}
//转译后
@import "reset.css";
body {
background: #EEE;
}
p {
background: #0982C1;
}


1、导入：Stylus支持字面@import CSS，也支持其他Stylus样式的动态导入。

2、字面CSS：任何
.css
扩展的文件名将作为字面量。例如：

@import "reset.css"
//渲染如下：
@import "reset.css"


3、Stylus导入

　　当使用@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
。对于库而言，这很有用，既可以展示所有特征与功能，同时又能导入特征子集。

4、js导入api：

//下面语句：
@import 'mixins/vendor'
//等同于：
.import('mixins/vendor')


七、继承(@extend)

1、继承：Stylus的@extend指令受SASS实现的启发，基本一致，除了些轻微差异。此功能大大简化了继承其他语义规则集的语义规则集的维护。

2、混合书写下的“继承”：尽管你可以使用混写实现类似效果，但会导致重复的CSS。 典型的模式是定义如下的几个类名，然后归结到一个元素中，例如"warning message"，该技术实现是没什么问题，但是维护就比较麻烦了。为了应对这个问题，CSS预处理器可以从一个选择继承另一个选择器下的所有样式。

message,
.warning {
padding: 10px;
border: 1px solid #eee;
}
.warning {
color: #E2E21E;
}


3、使用__@extend__：使用
__@extend__
得到同样的输出，只要把对应的选择器传给
@extend
即可。然后
.warning
选择器就会继承已经存在的
.message
规则。

.message {
padding: 10px;
border: 1px solid #eee;
}
.warning {
@extend .message;
color: #E2E21E;
}


　　这儿是个更复杂的例子，演示了
__@extend__
如何级联。

red = #E33E1E
yellow = #E2E21E

.message
padding: 10px
font: 14px Helvetica
border: 1px solid #eee
.warning
@extends .message
border-color: yellow
background: yellow + 70%
.error
@extends .message
border-color: red
background: red + 70%
.fatal
@extends .error
font-weight: bold
color: red


4、Stylus与SASS不同之处在于SASS不允许
__@extend__
嵌套选择器。

form
button
padding: 10px

a.button
@extend form button
Syntax error: Can't extend form button: can't extend nested selectors
// 解析错误： 无法继承自 button: 不能继承嵌套选择器
on line 6 of standard input
Use --trace for backtrace.


　　Stylus中，只要选择器匹配，就可以生效：

form
input[type=text]
padding: 5px
border: 1px solid #eee
color: #ddd
textarea
@extends form input[type=text]
padding: 10px
//解析
form input[type=text],
form textarea {
padding: 5px;
border: 1px solid #eee;
color: #ddd;
}
textarea {
padding: 10px;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航