stylus 在靜態頁面上的使用經驗

前段時間做vue項目，用到了css的提升開發效率的工具stylus，感覺很好用。現在又開始寫靜態頁面了，於是將強大的stylus拿過來繼續用。於是就寫了這篇使用經驗，算是自己總結一下。

stylus的安裝

使用前，我們需要在終端里面進行全局安裝stylus，這樣在項目中可以使用stylus將styl文件解析成css（當然也可以將css反編譯成styl文件）。

$ npm install stylus -g

可以使用命令查看是否安裝成功了（大寫）

 

$ stylus -V

 

安裝完成之后你可以看到下面一些常用的參數

Usage: stylus [options] [command] [< in [> out]]
              [file|dir ...]
Commands:
  help <prop>     Opens help info for <prop> in
                  your default browser. (OS X only)
Options:

  -u, --use <path>        Utilize the stylus plugin at <path>
  -i, --interactive       Start interactive REPL
  -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
  -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
  -V, --version           Display the version of Stylus
  -h, --help              Display help information  

 -w、-o、-c是我們會常用到的

-w ：監聽文件，只要原文件改變，解析后的目標文件也會同時改變
-o ：指定目標文件，不指定的話就是和源文件同名
-c ：壓縮文件，將源文件解析后並壓縮

 stylus的命令行操作

安裝完成后，我們進入項目的根目錄（最好是style這級目錄），假如我們有一個style目錄，里面有一個example.styl文件（stylus文件的后綴名就是styl），對文件進行解析。

// 將style目錄下面的styl文件都解析為相同文件名都css文件，並放在style目錄里面
// 並且監聽文件
$ stylus -w style/

// 將style目錄下面的styl文件都解析為相同文件名都css文件，並放在style目錄里面
// 並對css文件進行壓縮
// 並且監聽文件
$ stylus -w -c style/

// 將style目錄下面的styl文件都解析為指定的文件名css，與style同級目錄
// 並且監聽文件
$ stylus -w  style/ -o main.css

 stylus的基本使用語法

所有的前期准備工作完成，現在開始對stylus進行基本使用，看看效果

stylus文件

stylus文件

  body
    ul
      color: red
      font-size: 20px
      li
        color: yellow
        font-size: 36px

css文件

body ul {
  color: #f00;
  font-size: 20px;
}
body ul li {
  color: #ff0;
  font-size: 36px;
}

 就是這么簡單，這么方便。這樣就可以節省很多寫選擇器的時間了，這樣也不容易出錯了。

知道什么是stylus文件格式后，我們來看看一些在平時開發中常用到的一些技巧型的東西

&符號

&符號，表示同級元素，即和&同一列樣式的所有者

// style文件

ul
  li
    color: red
    &:first-child
      font-size: 20px

// css文件

ul li {
  color: #f00;
}
ul li:first-child {
  font-size: 20px;
}

 @符號

@name，表示繼承前面父級或自己已經定義過樣式的name的樣式

// stylus文件

.list
  background: red
  .part
    background: @background

// css文件

.list {
  background: #f00;
}
.list .part {
  background: #f00;
}

Variables(變量)

除了可以使用@來使用定義好的樣式外，我們還可以給變量賦值樣式，讓好在后面調用

//stylus文件

font-size = 14px
body
    font font-size Arial, sans-seri


// css文件

body {
  font: 14px Arial, sans-seri;
}

 可以將變量放在屬性中

// stylus文件

#prompt
    width: w = 200px
    margin-left: -(w / 2)

// css文件

#prompt {
  width: 200px;
  margin-left: -100px;
}

 有條件的使用屬性

// stylus:指定z-index值為1，但是，只有在z-index之前未指定的時候才這樣：

// stylus文件

position()
  position: arguments
  z-index: 1 unless @z-index

#logo
  z-index: 20
  position: absolute

#logo2
  position: absolute

// css文件

#logo {
  z-index: 20;
  position: absolute;
}
#logo2 {
  position: absolute;
  z-index: 1;
}

 函數方法

我們可以在stylus文件里面定義函數，然后在后面調用（當沒有參數的時候，可以直接使用arguments來代替）

// stylus文件

border-radius(val)
    -webkit-border-radius: val
    -moz-border-radius: val
    border-radius: val

button 
    border-radius(5px);

// css文件

button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

 Interpolation(插值)

// stylus文件

vendors = webkit moz o ms official
border-radius()
    for vendor in vendors
        if vendor == official
            border-radius: arguments
        else
            -{vendor}-border-radius: arguments
#content
    border-radius: 5px

// css文件

#content {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}

 @import

引入外來stylus文件，就可以使用里面定義的函數和變量來

@import('main.css') 當沒有指定文件后綴的時候默認為stylus

@import('style/') 當文件名都沒有指定時，默認為文件夾里面的main.styl或index.styl

@font-face

// stylus文件

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

.ingeo
  font-family Geo

// css文件

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

 @media

// stylus文件

@media print
  #header
  #footer
    display none

// css文件

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

@keyframes

// stylus文件

@keyframes pulse
    0%
      background-color red
      transform scale(1.0) rotate(0deg)
    33%
      background-color blue
      -webkit-transform scale(1.1) rotate(-5deg)

// css文件

@-moz-keyframes pulse {
  0% {
    background-color: #f00;
    transform: scale(1) rotate(0deg);
  }
  33% {
    background-color: #00f;
    -webkit-transform: scale(1.1) rotate(-5deg);
  }
}
@-webkit-keyframes pulse {
  0% {
    background-color: #f00;
    transform: scale(1) rotate(0deg);
  }
  33% {
    background-color: #00f;
    -webkit-transform: scale(1.1) rotate(-5deg);
  }
}
@-o-keyframes pulse {
  0% {
    background-color: #f00;
    transform: scale(1) rotate(0deg);
  }
  33% {
    background-color: #00f;
    -webkit-transform: scale(1.1) rotate(-5deg);
  }
}
@keyframes pulse {
  0% {
    background-color: #f00;
    transform: scale(1) rotate(0deg);
  }
  33% {
    background-color: #00f;
    -webkit-transform: scale(1.1) rotate(-5deg);
  }
}