stylus笔记(三)

1.@import 导入

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

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

如下很常见的库结构：

./tablet
  |-- index.styl 
  |-- vendor.styl 
  |-- buttons.styl 
  |-- images.styl

2. @media 媒体

@media工作原理和在常规CSS中一样，但是，要使用Stylus的块状符号。

@media print
  #header
  #footer
    display none
生成为：

@media print {
  #header,
  #footer {
    display: none;
  }
}

3. @font-face 自定义字体

@font-face跟其在CSS中作用表现一样，在后面简单地添加个块状属性即可，类似下面：

@font-face
  font-family Geo
  font-style normal
  src url(fonts/geo_sans_light/GensansLight.ttf)

.ingeo
  font-family Geo
生成为：

@font-face {
  font-family: Geo;
  font-style: normal;
  src: url("fonts/geo_sans_light/GensansLight.ttf");
}
.ingeo {
  font-family: Geo;
}

4.@keyframes 关键帧

Stylus支持@keyframes规则，当编译的时候转换成@-webkit-keyframes：

@keyframes pulse
0%
  background-color red
  opacity 1.0
  -webkit-transform scale(1.0) rotate(0deg)
33%
  background-color blue
  opacity 0.75
  -webkit-transform scale(1.1) rotate(-5deg)
67%
  background-color green
  opacity 0.5
  -webkit-transform scale(1.1) rotate(5deg)
100%
  background-color red
  opacity 1.0
  -webkit-transform scale(1.0) rotate(0deg)
生成为：

@-webkit-keyframes pulse {
  0% {
  background-color: red;
  opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
  }

  33% {
    background-color: blue;
    opacity: 0.75;
    -webkit-transform: scale(1.1) rotate(-5deg);
  }

  67% {
    background-color: green;
    opacity: 0.5;
    -webkit-transform: scale(1.1) rotate(5deg);
  }

  100% {
    background-color: red;
    opacity: 1;
    -webkit-transform: scale(1) rotate(0deg);
  }

}

扩展：

使用@keyframes，通过vendors变量，会自动添加私有前缀(webkit moz official)。这意味着你可以子啊任意时候立即高效地做修改。

@keyframes foo {
  from {
    color: black
  }
  to {
    color: white
  }
}
扩增两个默认前缀，官方解析：

@-moz-keyframes foo {
  0% {
    color: #000;
  }

  100% {
    color: #fff;
  }
}
@-webkit-keyframes foo {
  0% {
    color: #000;
  }

  100% {
    color: #fff;
  }
}
@keyframes foo {
  0% {
    color: #000;
  }

  100% {
    color: #fff;
  }
}

如果我们只想有标准解析，很简单，修改vendors：

vendors = official

@keyframes foo {
  from {
    color: black
  }
  to {
    color: white
  }
}
生成为：

@keyframes foo {
  0% {
    color: #000;
  }

  100% {
    color: #fff;
  }
}

5.继承 @extend

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

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

.message {
  padding: 10px;
  border: 1px solid #eee;
}

.warning {
  @extend .message;  继承了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
生成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;
}

6. CSS字面量（CSS　Ｌｉｔｅｒａｌ）

不管什么原因，如果遇到Stylus搞不定的特殊需求，你可以使用@css使其作为CSS字面量解决之。

@css {
  body {
    font: 14px;
  }
}
编译为：

body {
  font: 14px;
}

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

body
  padding 1 + 2
编译成：

body {
  padding: 1 + 2;
}

注意Stylus中/当作为属性使用的时候需要用括号括起来：

body
  font 14px/1.4
  font (14px/1.4)
生成：

body {
  font: 14px/1.4;
  font: 10px;
}

https://www.zhangxinxu.com/jq/stylus/js.php