CSS预处理框架——Stylus


Posted in HTML / CSS onApril 21, 2021

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字体、颜色、符号表情等,整篇并无插入图片。

HTML / CSS 相关文章推荐
纯CSS3实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
CSS3实现缺角矩形,折角矩形以及缺角边框
Dec 20 HTML / CSS
css3实现平移效果(transfrom:translate)的示例
Nov 13 HTML / CSS
CSS3 实现时间轴动画
Nov 25 HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
Jul 10 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
Jan 09 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
Dec 20 HTML / CSS
HTML5实现视频弹幕功能
Aug 09 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
Dec 02 HTML / CSS
基于CSS3画一个iPhone
CSS3 实现NES游戏机的示例代码
css实现文章分割线样式的多种方法总结
Apr 21 #HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 #HTML / CSS
CSS3鼠标悬浮过渡缩放效果
纯CSS实现hover图片pop-out弹出效果的实例代码
CSS3实现的文字弹出特效
Apr 16 #HTML / CSS
You might like
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
非常漂亮的相册集 使用jquery制作相册集
2016/04/28 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
浅谈Vue 初始化性能优化
2017/08/31 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
介绍Python中几个常用的类方法
2015/04/08 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
Python简单的制作图片验证码实例
2017/05/31 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
Python基础知识点 初识Python.md
2019/05/14 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
pyqt5 键盘监听按下enter 就登陆的实例
2019/06/25 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
业务员岗位职责
2013/11/16 职场文书
监护人证明
2015/06/19 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
《怀念母亲》教学反思
2016/02/19 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
JAVA SpringMVC实现自定义拦截器
2022/03/16 Python
Oracle锁表解决方法的详细记录
2022/06/05 Oracle