Stylus 笔记

安装

npm install -g stylus

参考命令帮助

查看命令帮助说明

stylus -h

注释： -为缩写命令，–为完整命令

Usage: stylus [options] [command] [< in [> out]]
              [file|dir ...]

Commands:

  help [<type>:]<prop> Opens help info at MDN for <prop> in
                        your default browser. Optionally
                        searches other resources of <type>:
                        safari opera w3c ms caniuse quirksmode

Options:

  -i, --interactive       Start interactive REPL
  -u, --use <path>        Utilize the Stylus plugin at <path>
  -U, --inline            Utilize image inlining via data URI support
  -w, --watch             Watch file(s) for changes and re-compile 监视并生成
  -o, --out <dir>         Output to <dir> when passing files
  -C, --css <src> [dest]  Convert CSS input to Stylus 转为styl格式
  -I, --include <path>    Add <path> to lookup paths
  -c, --compress          Compress CSS output 压缩输出
  -d, --compare           Display input along with output
  -f, --firebug           Emits debug infos in the generated CSS that
                          can be used by the FireStylus Firebug plugin
  -l, --line-numbers      Emits comments in the generated CSS
                          indicating the corresponding Stylus line
  -m, --sourcemap         Generates a sourcemap in sourcemaps v3 format
  -q, --quiet     				 Less noisy output
  --sourcemap-inline      Inlines sourcemap with full source text in base64 format
  --sourcemap-root <url>  "sourceRoot" property of the generated sourcemap
  --sourcemap-base <path> Base <path> from which sourcemap and all sources are relative
  -P, --prefix [prefix]   prefix all css classes
  -p, --print             Print out the compiled CSS
  --import <file>         Import stylus <file>
  --include-css           Include regular CSS on @import
  --ext			 Specify custom file extension for compiled file, default .css
  -D, --deps              Display dependencies of the compiled file
  --disable-cache         Disable caching
  --hoist-atrules         Move @import and @charset to the top
  -r, --resolve-url       Resolve relative urls inside imports
  --resolve-url-nocheck   Like --resolve-url but without file existence check
  -V, --version           Display the version of Stylus
  -h, --help              Display help information

自动编译

stylus -w style.styl -o dist

-w 监视文件变化并自动编译 -o 指定编译后css存放目录，不写直接存放当前文件目录

css转styl

stylus --css style.css style.styl

结构、嵌套书写方式

基本书写方式

豪华缩减，并且兼容ccs书写方式及sass常见书写方式

//stylus
body
  margin 0
  padding 0 

//编译后的css
body {
  margin: 0;
  padding: 0;
}

结构层级

用tab键区分层级

body
    color red
    ul
        line-height 20px
        height 20px
        font-size 16px
        li 
            display inline-block
            padding 10px
            border 1px solid #ccc
            text-align center
            a
                color red
                font-size 12px

变量

三种操作方法

函数引用、函数复用

font-size = 14px
font = font-size "Lucida Grande", Arial

body
  font font, sans-serif

带$的函数名

$font-size = 14px
body {
  font: $font-size sans-serif;
}

导入styl和引入css

导入border-radius.styl

@import "mixins/border-radius"

引用reset.css

@import "reset.css"

运算

运算符

同大多数编程语言一样，Stylus 也支持运算符。包含

一元运算符：！，not，-，+，～
二元运算符：下标运算符 []，范围 .. 或 …，加减，乘除 /*%，指数 **，相等与关系运算符== != >= <= > <，真与假，逻辑操作符，存在操作符 in，条件赋值?= :?
三元运算符：num ? unit(num, ‘px’):20px
其他：unit()，颜色操作，格式化字符串等

#logo
  position: absolute
  top: 50%
  left: 50%
  width: 150px
  height: 80px
  margin-left: -(@width / 2)
  margin-top: -(@height / 2)
  background: #000 - 10% // 颜色减暗10%，颜色可减暗或加量
  color: rgba(#fff, 0.5) //颜色增加透明度

自定义运算

add(a,b,c,d)
  a+b+c+d

.item
  margin-top 10px
  height: 30px
  padding: 5px
  padding-right: add(@height,@padding*2)

编译输出

.item {
  margin-top: 10px;
  height: 30px;
  padding: 5px;
  padding-right: 40px;
}

引用上级（父级）值

a background-color = blue

  body
    color: red
    ul
      li
        color: blue
        a
          background-color: @color

引用上级选择器、临近值引用

.list
  width: 200
  height: 50px
  &-item //选择器引用
    width: 100px
    height: @height //临近高度值引用
    line-height: @width //临近宽度值引用

输出效果

.list {
  width: 200;
  height: 50px;
}
.list-item {
  width: 100px;
  height: 50px;
  line-height: 100px; //获取的是临近的宽度值，而不是父级的
}

其他

命名规则参考(hexo-theme-landscape)

style.styl
  @import "nib"
  @import "_variables"
  @import "_util/mixin"
  @import "_util/grid"
  
  global-reset()