目录
- 内容介绍
- 一、特征
- 二、选择器（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、缩排 📖
基于缩进，使用缩排和凹排代替花括号
bodycolor white
2、规则集
与CSS一样，允许使用逗号为多个选择器同时定义属性
textarea,inputborder 1px solid #eee
长得像属性的选择器，尾部加个逗号
foo bar baz,
form input,
>aborder 1px solid #ccc
3、父级引用
字符&指向父选择器
textarea,inputcolor #ccc&:hovercolor #aaa (两个选择器同时改变)
4、消除歧义
类似padding-n 的表达式可能被解释为减法运算，也可能解释为一元负号属性。为避免歧义，用括号包裹表达式：
pad(n)padding (-n)
bodypad(5px)
三、变量（Variables）
1、变量 🔍
可以指定表达式为变量，然后在样式中贯穿使用
font-size=14px
bodyfont font-size Arial
2、标识符（变量名，函数等）
标识符（变量名，函数等），也可能包括$字符
$font-size=14px
3、属性查找
独特功能-不需要分配值给便来给你就可以定义引用属性，如：
$logoposition:absolutetop:50%left:50%width: w=150pxheight: h=80pxmargin-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、选择器插值
插值也可以在选择器上起作用：
tablefor row in 1 2 3 4 5tr: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)trbackground-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 + badd(10, 5)
// => 15add(10)
// => 20
3、函数体
add(a, b = a)a = unit(a, px)b = unit(b, px)a + badd(15%, 10deg)
// => 25
4、多个返回值
swap(a, b)(b a)swap(a, b)return b a
5、条件
compare(a, b)if a > bhigherelse if a < blowerelseequal
6、别名
plus = addplus(1, 2)
// => 3
7、变量函数
invoke(a, b, fn)fn(a, b)add(a, b)a + bbodypadding invoke(5, 10, add)padding invoke(5, 10, sub)
8、参数
sum()n = 0for num in argumentsn = n + numsum(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 = trueif overload-paddingpadding(y, x)margin y xbodypadding 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 redopacity 1.0-webkit-transform scale(1.0) rotate(0deg)
33%background-color blueopacity 0.75-webkit-transform scale(1.1) rotate(-5deg)
67%background-color greenopacity 0.5-webkit-transform scale(1.1) rotate(5deg)
100%background-color redopacity 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/
关于markdown编辑相关技巧：CSDN的markdown编辑器使用（含表格背景色、文本颜色字体字号、锚点跳转、表情符号等）
标签：Stylus，CSS，预处理
更多演示案例，查看 案例演示
欢迎评论留言!
