Stylus 教程



  • 定义和安装

    Stylus 是富于表现力、动态的、健壮的 CSS。
    Stylus 是一种创新的样式表语言,可编译为CSS。

    安装

    安装 Stylus 很简单,前提是你已经安装了 Node.js。 到 Node.js 官网下载适合你的操作系统的安装包安装即可。还要检查一下 npm 是否也一并安装了。
    $ npm install stylus -g
    如果你希望在 Node.js 平台上让 css 编程语言更有表现力并且具有 如下这些特性,请进入 Stylus 官方仓库 了解更多信息吧。
  • 示例

    下面示例使用了stylus 语法编写样式:
    ul
    li a
      display: block
      color: blue
      padding: 5px
      html.ie &
        padding: 6px
      &:hover
        color: red
    
    
    编译成css的结果:
    ul li a {
      display: block;
      color: #00f;
      padding: 5px;
    }
    html.ie ul li a {
      padding: 6px;
    }
    ul li a:hover {
      color: #f00;
    }
    
    
  • Stylus 特性

    下面列出 stylus 的所有特性:
    • 冒号可有可无
    • 分号可有可无
    • 逗号可有可无
    • 括号可有可无
    • 变量
    • 插值(Interpolation)
    • 混合(Mixin)
    • 数学计算
    • 强制类型转换
    • 动态引入
    • 条件表达式
    • 迭代
    • 嵌套选择器
    • 父级引用
    • Variable function calls
    • 词法作用域
    • 内置函数(超过 60 个)
    • 语法内函数(In-language functions)
    • 压缩可选
    • 图像内联可选
    • Stylus 可执行程序
    • 健壮的错误报告
    • 单行和多行注释
    • CSS 字面量
    • 字符转义
    • TextMate 捆绑
    • 以及更多!