Stylus使用简介

简介

Stylus 是一种 CSS 预处理器，类似于 Sass、Less 等，它允许开发者使用类似于 CSS 的语法来编写样式，并且提供了一些额外的功能和语法糖来增强 CSS 的编写和管理。

例子

1. 用stylus编写

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

div
  padding 5px
  border 1px solid #000
  border-radius 5px

2. 编译后的css

div {
  padding: 5px;
  border: 1px solid #000;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Stylus 特性

• 冒号可有可无
• 分号可有可无
• 逗号可有可无
• 括号可有可无
• 变量
• 插值
• 混入
• 算术
• 强制类型转换
• 动态引入
• 条件表达式
• 迭代
• 嵌套选择器
• 父级引用
• 变量函数调用
• 词法作用域
• 内置函数（超过 60 个）
• 内部语言函数
• 压缩可选
• 图像内联可选
• 可执行Stylus
• 健壮的错误报告
• 单行和多行注释
• CSS 字面量
• 字符转义
• TextMate 捆绑
• 以及更多！

安装及使用

全局安装及使用

1. 安装

npm install stylus -g

2. 使用

stylus -w style.styl -o style.css

-w(watch): 监听文件的变化并重新编译，-o(out): 输出css文件

Vue项目中安装及使用

1. 安装

• 手动安装

npm install -D stylus-loader stylus

• 使用vue-cli安装

在创建项目的时候选择Stylus预处理器。

2. 使用

• 在.styl文件中使用

div
  padding 5px
  border 1px solid #000
  border-radius 5px

• 在.vue文件中使用

<style lang="stylus">
div
  padding 5px
  border 1px solid #000
  border-radius 5px
</style>

---

选择器

• stylus

& 符号代表父级选择器。

textarea
input
  color #A7A7A7
  &:hover
    color #000

• css

textarea,
input {
  color: #a7a7a7;
}
textarea:hover,
input:hover {
  color: #000;
}

变量

• stylus

前置@字符在属性名前，可以访问该属性名对应的值。

$background-color = #000

#logo
  position absolute
  background-color $background-color
  top 50%
  left 50%
  width w = 150px
  height 80px
  margin-left -(w / 2)
  margin-top -(@height / 2)

• css

#logo {
  position: absolute;
  background-color: #000;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 80px;
  margin-left: -75px;
  margin-top: -40px;
}

插值

• stylus

Stylus支持通过使用{}字符包围表达式来插入值，该表达式会变成标识符的一部分。

// 私有前缀属性扩展
vendor(prop, args)
  -webkit-{prop} args
  -moz-{prop} args
  {prop} args

border-radius()
  vendor('border-radius', arguments)

button
  border-radius 6px

// 将多个选择器组合到一个变量中
mySelectors = '#foo,#bar,.baz'

{mySelectors}
  background #000

• css

// 私有前缀属性扩展
button {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

// 将多个选择器组合到一个变量中
#foo,
#bar,
.baz {
  background: #000;
}

运算符

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

[]
! ~ + -
is defined
** * / %
+ -
... ..
<= >= < >
in
== is != is not isnt
is a
&& and || or
?:
= := ?= += -= *= /= %=
not
if unless

• 下标运算符[]

 list = 1 2 3
 list[0]
 // => 1

 list[-1]
 // => 3

• 范围运算符… …

1..5
// => 1 2 3 4 5

1...5
// => 1 2 3 4

• 相等与关系运算符：== != >= <= > <

只有精确值才匹配。例如，0 == false和null == false均返回false。

5 == 5
// => true

10 > 5
// => true

#fff == #fff
// => true

true == false
// => false

wahoo == yay
// => false

(foo bar) == (foo bar)
// => true

(1 2 3) == (1 2 3)
// => true

(1 2 3) == (1 1 3)
// => false

==    is
!=    is not
!=    isnt

…

混入

• stylus

stripe(even = #fff, odd = #000)
 tr
   background-color odd
   &.even
   &:nth-child(even)
       background-color even

// 默认值
.table-default
  stripe()
  td
    padding 5px 10px

// 传值
.table
  stripe(#000, #fff)
  td
    padding 5px 10px

• css

// 默认值
.table-default tr {
  background-color: #000;
}
.table-default tr.even,
.table-default tr:nth-child(even) {
  background-color: #fff;
}
.table-default td {
  padding: 5px 10px;
}
// 传值
.table tr {
  background-color: #fff;
}
.table tr.even,
.table tr:nth-child(even) {
  background-color: #000;
}
.table td {
  padding: 5px 10px;
}

函数

函数定义与混入相同；但函数可以返回值。

arguments是所有函数体都有的局部变量，包含传递的所有参数。

• stylus

add(a, b = a)
  a + b

sizes()
 25px 20px

body 
  padding add(10px, 5px)
  div
    padding add(10px)
    margin sizes()

• css

body {
  padding: 15px;
}
body div {
  padding: 20px;
  margin: 25px 20px;
}

关键字参数

Stylus支持关键字参数，或"kwargs". 允许你根据相关参数名引用参数。

下面这些例子功能上都是一样的。但是，我们可以在列表中的任何地方放置关键字参数。其余不键入参数将适用于尚未得到满足的参数。

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()方法。

p(rgba)
// => inspect: rgba(red, green, blue, alpha)

内置函数

// 绝对值
abs(-5px)
// => 5px
abs(5px)
// => 5px

// 向上取整
ceil(5.6px)
// => 6px

// 向下取整
floor(5.6px)
// => 5px

…

其余参数

Stylus支持name…形式的其余参数。

• stylus

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

#login
  box-shadow #fff 1px 1px, #000 2px 2px 

• css

#login {
  -webkit-box-shadow: #fff 1px 1px, #000 2px 2px;
  -moz-box-shadow: #fff 1px 1px, #000 2px 2px;
  box-shadow: #fff 1px 1px, #000 2px 2px;
}

注释

Stylus支持三种注释，单行注释，多行注释，以及多行缓冲注释。

// 单行注释
body
  padding 5px // 5px的padding

/*
 * 多行注释
 */
add(a, b)
  a + b

/*!
 * 多行缓冲注释以/*!开头，Stylus压缩的时候这段无视直接输出。
 */
add(a, b)
  a + b

条件

• stylus

box(x, y, margin-only = false)
  if margin-only
    margin y x
  else
    padding y x

body
  box(5px, 10px, true)

• css

body {
  margin: 10px 5px;
}

迭代

Stylus允许你通过for/in对表达式进行迭代形式如下：

for <val-name> [, <key-name>] in <expression>

• stylus

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

• css

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

导入

Stylus支持字面@import CSS, 也支持其他Stylus样式的动态导入。

• stylus

@import "reset.css"

// bar.styl
.bar
  width: 10px;

// @import不仅可以在根级别使用，而且可以嵌套在其他选择器或规则中。
.foo
  @import 'bar.styl'

@media screen and (min-width: 640px)
  @import 'bar.styl'

• css

.foo .bar {
  width: 10px;
}
@media screen and (min-width: 640px) {
  .bar {
    width: 10px;
  }
}

媒体

• stylus

.foo
  for i in 1..3
    @media (min-width: 2**(i+7)px)
      width: 100px*i

• css

@media (min-width: 256px) {
  .foo {
    width: 100px;
  }
}
@media (min-width: 512px) {
  .foo {
    width: 200px;
  }
}
@media (min-width: 1024px) {
  .foo {
    width: 300px;
  }
}

关键帧

• stylus

$keyframe-name = pulse
@keyframes {$keyframe-name}
  for i in 0..10
    {10% * i}
      opacity (i/10)

• css

@keyframes pulse {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.2;
  }
  40% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.6;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

继承

• stylus

form
 input[type=text]
   padding 5px
   border 1px solid #000
   color #fff

textarea
 @extends form input[type=text]
 padding 10px

• css

form input[type=text],
textarea {
  padding: 5px;
  border: 1px solid #000;
  color: #fff;
}
textarea {
  padding: 10px;
}

CSS字面量

如果遇到任何Stylus不能满足的特定需求，可以使用@css使其作为CSS字面量解决。

• stylus

@css {
  body {
    font: 16px;
  }
}

• css

body {
  font: 16px;
}

字符转义

Stylus可以字符转义。可以让字符变成标识符，或是渲染成字面量。

• stylus

body
  padding 1 \+ 2
  font-size 16px/1.6
  font-size (16px/1.6) // 注意Stylus中/当作为属性使用的时候需要用括号括起来

• css

body {
  padding: 1 + 2;
  font-size: 16px/1.6;
  font-size: 10px;
}