stylus
- 兼容 less 的大部分语法
- <link rel="stylesheet" href="stylus/index.css">
- less 语法 省略 {}
- 缩进 分割语法块
- 分号 , 冒号 可以省略
- 变量使用方式： 不识别 @height: 40px，而是 $height=40px
- 父级引用器： &
- 混合 mixins.styl ：
- less:
.line-height(@h){
height: @h
line-height: @h
}
---------------------------------------------------
@import "mixins.styl"
- stylus:
line-height(h){
height h
line-height h
}
---------------------------------------------------
@import "mixins.styl"
line-height(41px)
- a
npm install -g stylus
文件后缀： index.styl
stylus 自动编译
File - settings - Tools - file Watchers
点击 +
选择 stylus ，直接 ok 应用
2
2
2
2
<header>
版芯固定 1190px / 1226px，两翼自适应
浮动不会超越上一个块级元素
padding 和 border 实现 导航距离分割线