css預處理框架stylus 選擇器

2021-09-27 11:30:36 字數 912 閱讀 3701

與python一樣,stylus選擇器與元素樣式以縮排進行分割( 開發中為了閱讀方便,建議屬性和屬性值以冒號分割 )

.box

color red

.box

與css一樣 , 定義多個選擇器時可以使用逗號隔開,或者換行進行區分:

.box,.box_1

color:red

.box

.box_1

color:red

.box,

.box_1

color:red

使用偽類選擇器 或 偽元素時,可以使用 字元 & 來指向父選擇器

.box,

.box_1

color : red

&:hover

color : yellow

.box,

.box_1

.box:hover,

.box_1:hover

這幾天在專案中有用到,看乙個小功能:需求是:除了第乙個list1,其它list 的border-top :1px solid #000

.list

width:100px

height:100px

&:not(:nth-of-type(1))

border-top:1px solid #000

css預處理框架stylus 變數

官方文件 我們可以把表示式指定為變數,然後在樣式中使用 在實際開發中通常會把可復用的樣式單獨寫在乙個以點.styl 的檔案中,stylus變數通常前邊加上 符,當然變數名是自定義的!指定變數,stylus中注釋與js一樣 使用 color blue font size 30px box color ...

CSS預處理器stylus 安裝與使用

css預處理器有less sass scss 及stylus 它們各自的背景如下 1.sass 2007年誕生,最早也是最成熟的css預處理器,擁有ruby社群的支援和compass這一最強大的css框架,目前受less影響,已經進化到了全面相容css的scss scss 需要使用分號和花括號而不是...

css預處理器

css預處理定義了一種新的語言,其思想是一種專門的程式語言,為css增加了一些程式設計的特性。將css作為目標生成檔案。開發者可以使用這種語言進行編碼工作。css預處理器是一種專門的程式語言,進行web頁面樣式設計,然後再編譯成正常的css檔案,以供專案使用。css預處理器為css增加了一些程式設計...