当前位置：主页 > 查看内容

CSS预处理框架——Stylus

发布时间：2021-08-07 00:00| 有位朋友查看

简介：目录内容介绍一、特征二、选择器Selectors ??1、缩排 :book: ??2、规则集 ??3、父级引用 ??4、消除歧义三、变量Variables ??1、变量 :mag: ??2、标识符变量名函数等 ??3、属性查找四、插值Interpolation ??1、插值 :pencil2: ??2、选择器插值五、运算……

??冒号可选、分号可选、逗号可选、括号可选、变量、插值、混合书写、算术、强制类型转换、动态导入、条件、迭代、嵌套选择、父级参考、变量函数调用、词法作用域、内置函数、内部语言函数、压缩可选、图像内敛可选、可执行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