stylus--css 框架使用方法

 

 

　　Stylus是一款須要編譯的css語言，因此其自己文件不能被html直接調用，須要要編譯爲css文件後再進行平常的加載。

stylus是一款優秀的css編譯語言，須要node.js支持，第一步須要安裝node.js

問題：Windows調試時ctrl+d無效果 ctrl+c退出? 怎樣直接在windows下輸出調試代碼

 

備註:# 表明本行是輸入回車運行行

１

    # apt-get update  
    # apt-get install -y python-software-properties software-properties-common  
    # add-apt-repository ppa:chris-lea/node.js  
    # apt-get update  
    # apt-get install nodejs  

 2 node - v 查看node版本信息若是有返回信息則安裝成功

3 安裝stylus

# npm install stylus -g

注意:必須找-g 同時配置環境爲全局方法

4 調試Stylus   

# stylus
border-radius()
  -webkit-border-radius arguments
  -moz-border-radius arguments
  border-radius arguments
  
body
  font 12px Helvetica, Arial, sans-serif
  
a.button
  border-radius(5px)

輸入Ctrl+D調試返回結果

看看是否會返回

body {
  font: 12px Helvetica, Arial, sans-serif;
}
a.button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

5 styus文件的編譯

建立一個test.styl 的文件，文件內容以下：

 1 border-radius()
 2   -webkit-border-radius arguments
 3   -moz-border-radius arguments
 4   border-radius arguments
 5   
 6 body
 7   font 12px Helvetica, Arial, sans-serif
 8   
 9 a.button
10   border-radius 5px

保存關閉，在命令行運行以下命令：

# stylus --compress < test.styl > test.css

看看是否是得到一個test.css的文件，看看內容是否以下：

1 body{
2 font:12px Helvetica,Arial,sans-serif
3 }
4 a.button{
5 -webkit-border-radius:5px;
6 -moz-border-radius:5px;
7 border-radius:5px
8 }

這樣一個stylus的文件就被編譯成了html能夠調用的css文件了。