Stylus 備忘清單
本備忘單旨在快速理解 stylus 所涉及的主要概念，顯示了它的常用方法使用清單
入門
介紹
為 Node.js 構(gòu)建的富有表現(xiàn)力、健壯、功能豐富的 CSS 語言
- CSS 備忘清單 (jaywcjlove.github.io)
- 在線編譯預(yù)覽 (stylus-lang.com)
# npm
$ npm install stylus -g
# pnpm
$ pnpm add -g stylus
在 Node.js 環(huán)境中使用 stylus
$ stylus one.styl two.styl
# stylus 從標(biāo)準(zhǔn)輸入讀取并輸出到標(biāo)準(zhǔn)輸出
$ stylus --compress < some.styl > some.css
# 將 css 目錄中的文件編譯輸出到 `public/css`
$ stylus css --out public/css
轉(zhuǎn)換 CSS，輸出 *.styl 文件
$ stylus --css < test.css > test.styl
$ stylus --css test.css /tmp/out.styl
支持 CSS 嵌套語法
.box {
color: blue;
.button {
color: red;
}
}
Stylus 是一個(gè) CSS 預(yù)處理器。另見: stylus-lang.com
支持類 python 縮進(jìn)語法
.box
color: blue
.button
color: red
也有效！冒號(hào)也是可選的。這通常用于 Stylus 文檔的語法
混合 Mixins
caps-type()
letter-spacing: 0.05em
h5
caps-type()
編譯 css 為：
h5 {
letter-spacing: 0.05em;
}
另見：下面Mixins
變量 Variables
royal-blue = #36a
div
color: royal-blue
標(biāo)識(shí)符（變量名、函數(shù)等）也可以包括 $ 字符
$font-size = 14px
body {
font: $font-size sans-serif;
}
另見：變量 Variables
混合 Mixins
沒有參數(shù)
有參數(shù)
border-radius(n)
-webkit-border-radius: n
border-radius: n
div
border-radius: 2px
border-radius(2px)
Mixins can be applied in two different ways.
參數(shù)默認(rèn)值
border-radius(n = 2px)
-webkit-border-radius: n
塊混合
Rest 參數(shù)
shadow(offset-x, args...)
box-shadow: offset-x args
margin-top: offset-x
#login
shadow: 1px 2px 5px #eee
另見: Rest 參數(shù)
函數(shù) Functions
函數(shù) Functions
參數(shù)默認(rèn)值
add(a, b = 2)
a + b
另見: 參數(shù)默認(rèn)值
命名參數(shù)
多個(gè)返回值
arguments
sum()
n = 0
for num in arguments
n = n + num
sum(1,2,3,4,5) // => 15
參數(shù) local 可用于所有函數(shù)體，并包含所有傳遞的參數(shù)
hash 示例
get(hash, key)
return pair[1] if pair[0] == key for pair in hash
hash = (one 1) (two 2) (three 3)
get(hash, two)
// => 2
值 Values
條件賦值
royal-blue = #36a
royal-blue ?= #89f
div
color: royal-blue // #36a
?= 只會(huì)在之前未設(shè)置的情況下設(shè)置變量
另見: 條件賦值
屬性查找
.logo
width: w = 150
margin-left: -(w / 2)
// or
height: 80px
margin-top: -(@height / 2)
另見: 屬性查找
插值
-{prefix}-border-radius: 2px
另見: Interpolation
Color operators
#888 + 50% // → #c3c3c3 (lighten)
#888 - 50% // → #444 (darken)
#f00 + 50deg // → #ffd500 (hue)
Casting
n = 5px
foo: (n)em
foo: (n * 5)%
Lookup
light-blue = #3bd
name = 'blue'
lookup('light-' + name)
另見: lookup
高級(jí)功能
有條件的
if color == blue
display: block
else if true and true
display: inline
else if 'hey' is not 'bye'
display: flex
else
display: none
別名:
| :- | :- |
|---|---|
== | is |
!= | is not |
!= | isnt |
另見: Conditionals
對(duì)于循環(huán)
font-size-1 = 10px
font-size-2 = 20px
font-size-3 = 30px
for i in 1..3
.text-{i}
font-size: lookup('font-size-' + i)
定義檢查
if ohnoes is defined
color: blue
另見: is defined
False 值
0
null
false
''
類型檢查
if val is a 'string'
if val is a 'ident'
if #fff is a 'rgba' // → true
另見: Instance check
內(nèi)置函數(shù)
顏色函數(shù)
alpha(#fff) //→ 1
alpha(rgba(0, 0, 0, 0.2)) //→ 0.2
dark(black) //→ true
light(black) //→ false
hue(#0a0) //→ 50deg
saturation(#f00) //→ 100%
lightness(#f00) //→ 50%
luminosity(#f00) //→ 0.2126
hue(#0a0, 0deg)
saturation(#f00, 50%)
lightness(#f00)
lighten(color, 10%)
darken(color, 10%)
saturate(color, 10%)
desaturate(color, 10%)
invert(color)
tint(color, 50%) // mix with white
shade(color, 50%) // mix with black
unquote(string)
圖片尺寸
緩存 Caching
size($width)
+cache('w' + $width)
width: $width
.a { size: 10px }
.b { size: 10px }
// 輸出: .a, b { width: 10px }
在第一次調(diào)用時(shí)將其內(nèi)容應(yīng)用于給定的選擇器，但會(huì)在第二次調(diào)用時(shí)使用相同的參數(shù) @extend 第一次調(diào)用的選擇器。另見: cache
Embed URL
background: embedurl('logo.png')
// → background: url("data:image/png;base64,…")
另見: embedurl
添加屬性
gradient(color)
add-property('background-image', linear-gradient(top, color, darken(color, 20%)))
color
body
background: gradient(red)
另見: add-property
sprintf
'-webkit-gradient(%s, %s, %s)' % (linear (0 0) (0 100%))
// → -webkit-gradient(linear, 0 0, 0 100%)
s("rgba(0, 0, 0, %s)", 0.3)
另見: s
另見
- CSS 備忘清單 (jaywcjlove.github.io)
- 在線編譯預(yù)覽 (stylus-lang.com)
- Less.js 備忘清單 (jaywcjlove.github.io)