stylus css 框架使用方法

2021-09-07 21:25:40 字數 1459 閱讀 9946

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 


a.button
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


4 a.button
這樣乙個stylus的檔案就被編譯成了html可以呼叫的css檔案了。

集合框架的使用方法

list與set都是介面collection的子介面，collection源 中有一些幫助實現基本的訪問操作的抽象方法，主要有add addall iterator remove size 在collection的子介面list set以及子類arraylist linkedlist vector ...

dubbo框架的使用方法。。。

一 dubbo使用須知。1.所有的service層必須要使用service註解 之前用的spring框架的，現在用dubbo框架所提供的 service註解 service timeout 單位是秒 2.在配置dubbo埠號的時候 只是provider專案和consumer專案直接資料通訊的時候所必...

顏色框架Hue使用方法

1.cocoapods安裝huepod hue 2.匯入框架import hue3.將十六進製制數字變成對應的顏色值let color uicolor.init hex dddddd 4.顏色轉顏色值let hex1 uicolor.red.hex true 將顏色轉為十六進製制，前面有 號 let...