stylus常用的功能

選擇器

傳統css寫法

body

body

color white

父級引用

字元&指向父選擇器。下面這個例子，我們兩個選擇器textarea和input在:hover偽類選擇器上都改變了color值

textarea，

input
color #a7a7a7
&:hover
color #000

textarea,

input 
textarea:hover,
input:hover

我們可以指定表示式為變數，然後在我們的樣式中貫穿使用

$font-size = 14px

body

和函式寫法類似

border-radius(n)

-webkit-border-radius n
-moz-border-radius n
border-radius n
form input[type=button]
border-radius(5px)

form input[type=button]

匯入(@import)

任何.css擴充套件的檔名將作為字面量。例如：

@import "reset.css"

.message 

.warning

message,

.warning 
.warning

vue 樣式中的stylus

專案中如果多個地方都用的同一色值，並且有時候需要根據節日或者活動需要更改主題色即可用stylus來實現哦。一 stylus的檔案是.styl 二 style中的樣式引入 import assets var.styl 三 stylus語法 bg orange使用示例 在assets資料夾中建立them...

關於stylus庫的使用

關於stylus庫的使用 專案中，通常會有那中主題顏色啦，主題字型字型大小啦，或者是某種會重複使用的主題樣式，但是這種東西要是每個檔案都要改那就很蛋疼了，所以對於開發專案來說很需要這種檔案，來減少工作量。大致步驟 建乙個 styl 檔案，然後在你想用的style標籤裡引入這個檔案來使用 abc.st...

stylus在vue中的使用

stylus是乙個css預處理器，比較流行的css預處理器有sass less stylus，它們都一樣，都是css的語法糖，可以使用變數，可以有簡單的邏輯，使css的開發效率更高，更易維護。stylus來自node社群，它的語法相容性強，個人覺得也更加簡潔，選擇在vue中使用。以webpack模板...