目錄
- 內容介紹
- 一、特征
- 二、選擇器（Selectors）
- ??1、縮排 :book:
- ??2、規則集
- ??3、父級參考
- ??4、消除歧義
- 三、變數（Variables）
- ??1、變數 :mag:
- ??2、識別符號（變數名，函式等）
- ??3、屬性查找
- 四、插值（Interpolation）
- ??1、插值 :pencil2:
- ??2、選擇器插值
- 五、運算子（Operators）
- ??1、運算子優先級：從高到低 :computer:
- ??2、一元運算子
- ??3、二元運算子
- ??4、加減法
- ??5、乘除：/ * %
- ??6、指數：**
- ??7、相等與關系運算：== != >= <= ><
- ??8、真與假：
- ??9、邏輯運算子：&& || or
- ??10、存在運算子：in
- ??11、條件賦值：?= :=
- ??12、實體檢查： is a
- ??13、變數定義：is defined
- ??14、三元：
- ??15、鑄造：
- ??16、顏色操作：
- ??17、通過增加或減少百分值調整顏色亮度，
- ??18、通過增加或減少色度調整色調，
- ??19、格式化字串：
- 六、混合書寫（Mixins）
- ??1、混入 :necktie:
- ??2、父級參考
- 七、方法（Functions）
- ??1、函式
- ??2、默認引數
- ??3、函式體
- ??4、多個回傳值
- ??5、條件
- ??6、別名
- ??7、變數函式
- ??8、引數
- ??9、哈希示例
- 八、關鍵字引數（Keyword Arguments）
- 九、內置方法（Built-in Functions）
- ??1、red(color)
- ??2、alpha(color)
- ??3、dark(color)
- ??4、hue(color)
- 5、更多內置引數（不做羅列，請參考檔案）
- 十、注釋（Comment）
- ??1、單行注釋：//
- ??2、多行注釋：/* */
- ??3、多行緩沖注釋：/*! */
- 十一、條件（Conditionals）
- ??1、條件
- ??2、if / else if / else
- ??3、除非（unless）
- ??4、后綴條件
- 十二、迭代（iteration）
- 十三、匯入（@import）
- ??1、字面量CSS
- ??2、Stylus匯入
- ??3、Javascript匯入API
- 十四、媒體（@media）
- 十五、自定義字體（@font-face）
- 十六、關鍵幀（@keyframes）
- 十七、繼承（@extend）
- 十八、函式url()
- ??1、limit
- ??2、paths
- 注
內容介紹
Stylus是一個CSS預處理框架，后綴為.styl ，
一、特征
??冒號可選、分號可選、逗號可選、括號可選、變數、插值、混合書寫、算術、強制型別轉換、動態匯入、條件、迭代、嵌套選擇、父級參考、變數函式呼叫、詞法作用域、內置函式、內部語言函式、壓縮可選、影像內斂可選、可執行Stylus、健壯的錯誤報告、單行和多行注釋、CSS字面量、字符轉義、TextMate捆綁、…
二、選擇器（Selectors）
??1、縮排 📖
??基于縮進，使用縮排和凹排代替花括號
body
color white
??2、規則集
??與CSS一樣，允許使用逗號為多個選擇器同時定義屬性
textarea,input
border 1px solid #eee
??長得像屬性的選擇器，尾部加個逗號
foo bar baz,
form input,
>a
border 1px solid #ccc
??3、父級參考
??字符&指向父選擇器
textarea,input
color #ccc
&:hover
color #aaa (兩個選擇器同時改變)
??4、消除歧義
??類似padding-n 的運算式可能被解釋為減法運算，也可能解釋為一元負號屬性，為避免歧義，用括號包裹運算式：
pad(n)
padding (-n)
body
pad(5px)
三、變數（Variables）
??1、變數 🔍
??可以指定運算式為變數，然后在樣式中貫穿使用
font-size=14px
body
font font-size Arial
??2、識別符號（變數名，函式等）
??識別符號（變數名，函式等），也可能包括$字符
$font-size=14px
??3、屬性查找
??獨特功能-不需要分配值給便來給你就可以定義參考屬性，如：
$logo
position:absolute
top:50%
left:50%
width: w=150px
height: h=80px
margin-top: -(@height/2)
margin-left: -(@weight/2)
??屬性“向上冒泡”，查找堆疊直到被發現，或者回傳null（如果屬性未找到）
四、插值（Interpolation）
??1、插值 ??
??支持通過使用{}字符包圍運算式來插入值，其會變成識別符號的一部分，??例如-webkit-{'border'+'-radius'}等同于-webkit-border-radius
??如 私有前綴屬性擴展：
vendor(prop,args)
-webkit-{prop} args
-moz-{prop} args
{prop} args
??2、選擇器插值
??插值也可以在選擇器上起作用：
table
for row in 1 2 3 4 5
tr:nth-child(row)
height:10px * row
五、運算子（Operators）
??1、運算子優先級：從高到低 💻
[]
! ~ + -
is defined
** * / %
+ -
... ..
<= >= <>
in
== is != is not isnt
is a
&& and || or
? :
= := ?= += -= *= /= %=
not
if unless
??2、一元運算子
!0 true
!!0 false
!1 false
!!5px true
-5px -5px
--5px 5px
not true false
not not true true
??邏輯運算子not的優先級較低
not a or b => not(a or b)
??3、二元運算子
??下標運算子 [] 允許通過索引獲取運算式內部值，括號運算式可以充當元組（如(15px,15px)）
范圍：… …
??提供包含界線運算子(…)和范圍運算子(…)
1..5 => 1 2 3 4 5
1...5 => 1 2 3 4
??4、加減法
??二元加減法運算其單位會轉化，或使用默認字面量值
??5、乘除：/ * %
??使用 / 時候，必須使用()括號包住，
??6、指數：**
2**8 =》 256
??7、相等與關系運算：== != >= <= ><
??相等運算可以被用來等同單位/顏色/字串甚至識別符號，
??8、真與假：
??近乎一切都是true，
false： 0 null false
??9、邏輯運算子：&& || or
??10、存在運算子：in
??檢查左邊內容是否在右邊的運算式中；
??11、條件賦值：?= :=
???= (?：)，無需破壞值（如果存在）定義變數，
??12、實體檢查： is a
型別檢查 => type(#fff)=="rgba"
??13、變數定義：is defined
??用來檢查變數是否已經分配了值
??14、三元：
??三個操作物件的運算子（條件運算式/真運算式以及假運算式）
??15、鑄造：
??作為替代簡潔的內置unit()函式，語法(expr)unit可用來強制后綴；
??16、顏色操作：
#0e0 + #0e0 => #0f0
??17、通過增加或減少百分值調整顏色亮度，
#888 + 50%
??18、通過增加或減少色度調整色調，
#f00+50deg
??19、格式化字串：
??% 可以用來生成字面量值，通過傳參給內置 s() 方法
六、混合書寫（Mixins）
??1、混入 👔
??作為狀態呼叫，而非運算式
??當border-radius() 選擇器中呼叫時候，屬性會被擴展并復制在選擇器中；
??2、父級參考
??可以利用父級參考字符 &
stripe(even = #fff, odd = #eee)
tr
background-color odd
&.even
&:nth-child(even)
background-color even
七、方法（Functions）
??1、函式
??內置語言函式定義，其定義與mixins混入一致，卻可以回傳值
add(a,b)
a + b =>
body
padding add(10px,5)
??2、默認引數
add(a, b = a)
a + b
add(10, 5)
// => 15
add(10)
// => 20
??3、函式體
add(a, b = a)
a = unit(a, px)
b = unit(b, px)
a + b
add(15%, 10deg)
// => 25
??4、多個回傳值
swap(a, b)
(b a)
swap(a, b)
return b a
??5、條件
compare(a, b)
if a > b
higher
else if a < b
lower
else
equal
??6、別名
plus = add
plus(1, 2)
// => 3
??7、變數函式
invoke(a, b, fn)
fn(a, b)
add(a, b)
a + b
body
padding invoke(5, 10, add)
padding invoke(5, 10, sub)
??8、引數
sum()
n = 0
for num in arguments
n = n + num
sum(1,2,3,4,5)
// => 15
??9、哈希示例
get(hash, key)
return pair[1] if pair[0] == key for pair in hash
八、關鍵字引數（Keyword Arguments）
??可以放置關鍵字引數，其余不鍵入引數將適用于尚未得到滿足的引數
body {
color: rgba(255, 200, 100, 0.5);
color: rgba(red: 255, green: 200, blue: 100, alpha: 0.5);
color: rgba(alpha: 0.5, blue: 100, red: 255, 200);
color: rgba(alpha: 0.5, blue: 100, 255, 200);
}
九、內置方法（Built-in Functions）
??1、red(color)
??回傳color中的紅色比重
??2、alpha(color)
??回傳color中的透明度比重
??3、dark(color)
??檢查color是否為暗色
??4、hue(color)
??回傳給定color的色調
5、更多內置引數（不做羅列，請參考檔案）
??內置引數參考地址：https://www.zhangxinxu.com/jq/stylus/bifs.php
十、注釋（Comment）
??1、單行注釋：//
??不輸出
??2、多行注釋：/* */
??只有在compress選項未啟用的時候才會被輸出
??3、多行緩沖注釋：/*! */
??壓縮的時候這段無視直接輸出
十一、條件（Conditionals）
??1、條件
??條件提供了語言的流控制，提供的條件有匯入/混入/函式以及更多
??2、if / else if / else
overload-padding = true
if overload-padding
padding(y, x)
margin y x
body
padding 5px 10px
??3、除非（unless）
??與if相反
??4、后綴條件
??擋右邊運算式為真的時候執行左邊的物件
十二、迭代（iteration）
??可以通過for/in 對運算式進行迭代
十三、匯入（@import）
??1、字面量CSS
??任何.css擴展的檔案名將作為字面量
@import “reset.css”
??2、Stylus匯入
??當使用@import沒有.css擴展，會被認為是Stylus片段
??3、Javascript匯入API
??當使用.import(path)方法，這些匯入是被推遲的，直到賦值，
十四、媒體（@media）
??需要使用Stylus的塊狀符號
十五、自定義字體（@font-face）
??需要添加塊狀屬性
十六、關鍵幀（@keyframes）
@keyframes pulse
0%
background-color red
opacity 1.0
-webkit-transform scale(1.0) rotate(0deg)
33%
background-color blue
opacity 0.75
-webkit-transform scale(1.1) rotate(-5deg)
67%
background-color green
opacity 0.5
-webkit-transform scale(1.1) rotate(5deg)
100%
background-color red
opacity 1.0
-webkit-transform scale(1.0) rotate(0deg)
十七、繼承（@extend）
.message {
padding: 10px;
border: 1px solid #eee;
}
.warning {
@extend .message;
color: #E2E21E;
}
十八、函式url()
??Stylus捆綁了一個可選函式，名叫url（），其替代了字面上的url（）呼叫（且使用base64 Data URLs有條件的行內）
??1、limit
??大小默認限制30kb
??2、paths
??大小默認限制30kb
注
???主要用于整理筆記以及測驗markdown字體、顏色、符號表情等，整篇并無插入圖片，
參考檔案：
??stylus中文檔案地址：https://stylus.bootcss.com/
??張鑫旭stylus檔案地址：https://www.zhangxinxu.com/jq/stylus/
標簽：Stylus，CSS，預處理
更多演示案例，查看 案例演示
歡迎評論留言!
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/278100.html
標籤：其他
上一篇：Ajax請求的使用