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字体、颜色、符号表情等,整篇并无插入图片。
CSS预处理框架——Stylus
- Author -
人间小美味695声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@