title: stylus入门学习笔记
date: 2018-09-06 17:35:28
tags: [stylus]
description: 学习到 vue, 有人推荐使用 stylus 这个 css 预处理器。而之前也只是停留在听说过 stylus,并没有实际操作过。现在正好抽空来学习一下呗;如果会 less,sass之类的 css 预编译器,学 stylus 也是 so easy!
---
学习到 vue, 有人推荐使用 stylus 这个 css 预处理器。而之前也只是停留在听说过 stylus,并没有实际操作过。现在正好抽空来学习一下呗;如果会 less,sass之类的 css 预编译器,学 stylus 也是 so easy!
学习来源:张鑫旭个人博客,这是个 css 界大牛哦
话不多说,先来段代码比较一下吧。
body
color: white
textarea, input
border: 1px solid #333
p
li
ul
margin: 0
.contain
&:hover
opacity: 0.8
等同于
body {
color: white;
}
body textarea,
body input {
border: 1px solid #333;
}
body p,
body li,
body ul {
margin: 0;
}
body .contain:hover {
opacity: 0.8;
}
目前看来,stylus 就是将 sass 的花括号去掉,分号不要而已。按照之前的 sass、less 的语法写,就差不了太多。所以不做多解释,继续下面。
有 stylus 无法处理的属性值,可以使用 unquote()
filter
unquote('progid: DXImageTransform.Microsoft.BasicImage(rotation=1)')
转化成
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1)
#声明变量
直接使用 '=' 来声明, 变量中可以带 $
符
font-size = 14px
$color = #ddd
body {
font-size: font-size
background-color: $color
}
等同于
body {
font-size: 14px;
background-color: #ddd;
}
#插值
Stylus支持通过使用{}字符包围表达式来插入值,其会变成标识符的一部分。例如,-webkit-{'border' + '-radius'}等同于-webkit-border-radius.
vendor(prop, args)
-webkit-{prop} args
-moz-{prop} args
{prop} args
border-radius()
vendor('border-radius', arguments)
box-shadow()
vendor('box-shadow', arguments)
button
border-radius 1px 2px / 3px 4px
转换成
button {
-webkit-border-radius: 1px 2px / 3px 4px;
-moz-border-radius: 1px 2px / 3px 4px;
border-radius: 1px 2px / 3px 4px;
}
插值也可以在选择器上起作用。eg:
table
for row in 1 2 3
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;
}
利用这个属性,我们可以封装很多的方法了。将浏览器兼容前缀写法封装成一个函数。
add-attr-prefix(attr, args) {
-webkit-{attr}: args
-moz-{attr}: args
-o-{attr}: args
-ms-{attr}: args
{attr}: args
}
// 封装一下 box-shadow 函数
box-shadow()
add-attr-prefix('box-shadow', arguments)
body
box-shadow: 8px 8px 20px red
等价于
body {
-webkit-box-shadow: 8px 8px 20px red;
-moz-box-shadow: 8px 8px 20px red;
-o-box-shadow: 8px 8px 20px red;
-ms-box-shadow: 8px 8px 20px red;
box-shadow: 8px 8px 20px red;
}
#混合书写
混入和函数定义方法一致,但是应用却大相径庭。
定义方式:
aaa ()
语句块
譬如,
border-radius(npx)
-webkit-border-radius npx
-moz-border-radius npx
border-radius npx
.box
border-radius(5px)
// 使用混入书写,你可以完全忽略括号,提供梦幻般私有属性的支持。
border-radius 5px
也可以不传参数,用 arguments
border-radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments
box-shadow(args...)
-webkit-box-shadow args
-moz-box-shadow args
box-shadow args
box-shadow1()
-webkit-box-shadow agruments
-moz-box-shadow agruments
box-shadow agruments
.box
box-shadow 1px 1px 5px red, 1px 3px 5px green
.box1
box-shadow 1px 1px 5px red, 1px 3px 5px green
需要注意的是,argument 和 args...,前者可以准确的将所有参数传递,包括逗号之类的一些特殊符号。
看一下输出结果:
.box {
-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;
}
.box1 {
-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;
}
同 less, sass 一样,引用父级也是用 &;利用 & 封装一个条纹表格
stripe(even = #fff, odd = #eee)
tr
background-color odd
&.even
&:nth-child(even)
background-color even
函数是可以返回值的。有时候返回值不是一个具体的值,而是表示符。
swap(a, b)
b a
这样的时候,写成
swap(a, b)
(b a)
swap(a, b)
return b a
个人在实际项目中用到的方法少之又少;所以感觉,不做游戏开发的话,用到方法的少。看到这儿,就算是已经入门了。
#注释
Stylus支持三种注释,单行注释,多行注释,以及多行缓冲注释。
前面三种就不多说了,和以前的写法完全一致。对于多行缓冲注释,跟多行注释类似,不同之处在于开始的时候,这里是/*!.这个相当于告诉Stylus压缩的时候这段无视直接输出。
#条件
if, else if, else 和常见的条件是一样的。在 stylus 里,也想 ruby 一样,用了 unless (除非)条件。也很好理解,其基本上与 if 相反,本质上是 (!(expr)). eg:
disable = true
unless disable
display none
另外,Stylus 支持后缀条件,这就意味着 if 和 unless 可以当作操作符;当右边表达式为真的时候执行左边的操作对象。
一般适用于单行语句。
譬如:
negative(n)
unless n is a 'unit'
error('无效数值')
if n < 0
yes
else
no
// 就可以写成下面这种形式了
negative(n)
error('无效数值') unless n is a 'unit'
return yes if n < 0
no
#迭代
for <val-name> [, <key-name>] in <expression>
感觉实际开发中用不到,暂时先放着,待后续补齐吧。
#@import
任何 .css
扩展的文件名将作为字面量。例如,
@import "reset.css"
// 渲染成 ===>>
@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. 对于库而言,这很有用,既可以展示所有特征与功能,同时又能导入特征子集。
还有像 @media,@font-face,@keyframes 等和 css 中的差不了太多。
注意,@keyframes 会通过 vendors 变量,会自动添加私有前缀(webkit moz official)。如果我们只想有标准解析,很简单,修改 vendors = official
.
#@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
生成 css 如下
.message,
.warning,
.error,
.fatal {
padding: 10px;
font: 14px Helvetica;
border: 1px solid #eee;
}
.warning {
border-color: #e2e21e;
background: #f6f6bc;
}
.error,
.fatal {
border-color: #e33e1e;
background: #f7c5bc;
}
.fatal {
font-weight: bold;
color: #e33e1e;
}
ok, stylus 的学习,就简单到这儿了吧。后面有必要再深入学习一波。
那一夜我烧毁了所有的记忆,从此我的梦就透明了,那一天我扔掉了所有的昨天,从此我的脚步就轻盈了。 一一 泰戈尔(《飞鸟集》)