與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增加了一些程式設計...