关键词：
CSS 预处理器 Stylus分享
ps:为了分享，内容东拼西凑，并非原创，很多参考了 张鑫旭大大翻译的中文文档。这里放上两个不错的stylus链接：
https://github.com/leeseean/stylus-style-guide github stylus语法规范
http://blog.hooperui.com/561-2/ 预处理器的作用ect 写的很好。。
一、简介
由于原生css有一些缺陷，
一些CSS预处理器应运而生
使用最多的是
变量（variables），代码混合（ mixins），嵌套（nested rules）以及 代码模块化(Modules)。
复用，逻辑能力和抽象能力。
Stylus相较于SASS更加简洁，甚至冒号也都可以省略，初学Stylus时感到它太神奇了，仅仅以空格分隔属性名和多个属性值就可以生成想要的CSS，而且还可以拼接字符串等等。与此同时，类似Ruby或Python完善的缩进语法，Stylus在简约自由中有效的防止了语法歧义。
安装
npm install stylus --save
例子
Stylus由Javascript编译，其结构语句也和Javascript相差不多。Stylus较之LESS则要优越不少，不仅仅是可定义变量，如Javascript般的条件语句和循环语句也为Stylus带来各种可能，加上丰富的内置函数，可以轻松判断和操作各种变量。而利用这样的动态性，就可以写出非常强壮的CSS以满足不同环境和条件下的需要。
二、从语法和mixin 混合开始
1、& 指向的是父选择器。
字符&指向父选择器。下面这个例子，我们两个选择器(textarea和input)在:hover伪类选择器上都改变了color值
textarea
input
color #A7A7A7
&:hover
color #000
等同于：
textarea,
input {
color: #a7a7a7;
}
textarea:hover,
input:hover {
color: #000;
}
2、mixin 混合书写。混入
先来一段官方描述：如果你发现自己在不停地重复一段样式，那就应该把这段样式构造成优良的混合器，尤其是这段样式本身就是一个逻辑单元。再为其添加一个展示性的描述，能够清晰明了的看出它是用来干嘛的。
显然，你首先会想到的是需要各种浏览器厂商前缀的CSS3代码。一个好的事情是，mixin本身不会被编译到css代码中。
混入和函数定义方法一致，但是应用却大相径庭。
例如，下面有定义的border-radius(n)方法，其却作为一个mixin（如，作为状态调用，而非表达式）调用。
当border-radius()选择器中调用时候，属性会被扩展并复制在选择器中。
border-radius(n)
-webkit-border-radius n
-moz-border-radius n
border-radius n
form input[type=button]
border-radius (5px)
标红括号可以省略。。
也可以把n替换为 arguments 这样就可以传递多个值
如 border-radius 1px 2px / 3px 4px
编译成
form input[type=button] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
3、而且在调用时，也不一定要使用括号的形式，可以使用CSS的形式，直接Mixin名加空格然后写参数。所以有时候可以直接写一个Mixin来修改CSS属性的功能，比如看看下面这个兼容所有标准浏览器阴影的写法，可以很方便的为标准调用加上各标准浏览器的前缀：
下面这个例子，IE浏览器利用了父级引用以及混合书写来实现2px的边框。
box-shadow()
-webkit-box-shadow arguments
-moz-box-shadow arguments
box-shadow arguments
html.ie8 &,
html.ie7 &,
html.ie6 &
border 2px solid arguments[length(arguments) - 1]
body
#login
box-shadow 1px 1px 3px #eee
其变身后面目：
body #login {
-webkit-box-shadow: 1px 1px 3px #eee;
-moz-box-shadow: 1px 1px 3px #eee;
box-shadow: 1px 1px 3px #eee;
}
html.ie8 body #login,
html.ie7 body #login,
html.ie6 body #login {
border: 2px solid #eee;
}
可以看到调用时的写法与一般的写法一样，但是因为Mixin的存在，box-shadow不再是一个属性，可以变成几行带有各浏览器前缀的CSS。
4、插值
Stylus支持通过使用{}字符包围表达式来插入值，其会变成标识符的一部分。例如，-webkit-{‘border‘ + ‘-radius‘}等同于-webkit-border-radius.
比较好的例子就是私有前缀属性扩展：
vendor(prop, args) -webkit-{prop} args -moz-{prop} args {prop} args border-radius() vendor(‘border-radius‘, arguments) box-shadow() vendor(‘box-shadow‘, arguments) button border-radius 1px 2px / 3px 4px
变身：
button {
-webkit-border-radius: 1px 2px / 3px 4px;
-moz-border-radius: 1px 2px / 3px 4px;
border-radius: 1px 2px / 3px 4px;
}
不仅仅是box-shadow，CSS3的许多属性都需要添加前缀~
三、响应式支持
1、变量 可以直接指定表达式的值为变量，可以给变量赋多个值可以组成一个表达式列表
你可以使用"$"符号开始。结尾的分号(;)可有可无,但变量名和变量值之间的等号(=)是需要的。不要用@ (不会赋值)
有了变量，我们不需要为了修改一个颜色而输入许多次,也不需要为了修改一个宽度去到找寻找他.(我们只需要修改定义好的变量,修改一次就足够).
font-size = 14px
font = font-size "Lucida Grande", Arial
body
font font sans-serif
编译为：
body {
font: 14px "Lucida Grande", Arial sans-serif;
}
2、Stylus有另外一个很酷的独特功能，不需要分配值给变量就可以定义引用属性。下面是个很好的例子，元素水平垂直居中对齐（典型的方法是使用百分比和margin负值），如下：
简单地前置@字符在属性名前来访问该属性名对应的值：
#logo
position: absolute
top: 50%
left: 50%
width: 150px
height: 80px
margin-left: -(@width / 2)
margin-top: -(@height / 2)
另外使用案例是基于其他属性有条件地定义属性。在下面这个例子中，我们默认指定z-index值为1，但是，只有在z-
index之前未指定的时候才这样：
position()
position: arguments
z-index: 1 unless @z-index
#logo
z-index: 20
position: absolute
属性会“向上冒泡”查找堆栈直到被发现，或者返回null（如果属性搞不定）。下面这个例子，@color被弄成了blue.（父元素之前定义过的blue。）
3、响应式的例子。关于数组的定义，对于响应式来说有非常好的帮助，因为响应式往往是一系列的尺寸或设备，无论如何，使用数组可以轻松的定义多组对应与索引的配套值。
$screen = 1920px 1280px 1024px 768px 640px 320px
$width = 1600px 1080px 840px 600px 480px 300px
$margin = 180px 100px 80px 40px 20px 0
media()
join(‘ and ‘, arguments)
responsive(p_index)
body
width $width[p_index]
margin-left $margin[p_index]
responsive(0)
for $i in 0 1 2 3 4 5
$media = media(‘screen‘, ‘(max-width: ‘ + $screen[$i] + ‘)‘)
@media $media
responsive($i)
// =>
body {
width: 1600px;
margin-left: 180px;
}
@media screen and (max-width: 1920px) {
body {
width: 1600px;
margin-left: 180px;
}
}
// ...
@media screen and (max-width: 320px) {
body {
width: 300px;
margin-left: 0;
}
}
当然响应式不是简单的改变尺寸，如果你需要控制某些内容的显示则可以使用一个Boolean的数组来判断是否显示，控制结构或样式则可以字符串的数组来放置一些预先写好的Mixin名称。
四、模块化管理、易维护
当我们在做中、大型项目的时候，往往一个功能或者模块，会在很多页面都用到，如果我们把它们单独的放到所有页面对应的代码中，那么每次修改，我们都要去改所有的代码段，这显然是低效的，如果将它们放到一个大的公共文件中，有很可能造成冗余，或许，你会说，可以放在一个单独的文件中，然后引入到页面中，就行了，这样是可以，但是会多出来一个文件的请求，如果有多个，那么从维护性和性能两方面考虑的话，就得不偿失了。所以，我们可以使用处理器中的@import规则，把复用代码段提取，然后在需要的页面引入，这样，同样能达到“一处变、处处变”的效果，而且，不会有多余的请求发出，一个页面可以只有一个css文件即可。
在CSS中，并不喜欢用@import来导入样式，因为这样的做法会增加HTTP的请求。但是在CSS预处理器中的导入（@import）规则和CSS的有所不同，它只是在语义上导入不同的文件，但最终结果是生成一个CSS文件。如果你是通过“@import ‘file.css‘”导入“file.css”样式文件，那效果跟普通CSS导入样式文件一样。注意：导入文件中定义了变量、混合等信息也将会被引入到主样式文件中，因此需要避免他们的相互冲突。
--------------------------------------------------
/* file.{type} */
body {
background: #EEE;
}
------------------------------------------------
@import "reset.css";
@import "file.{type}";
p {
background: #0982C1;
}
转译后---------------------------------------------
@import "reset.css";
body {
background: #EEE;
}
p {
background: #0982C1;
}
嵌套、继承
如果我们在CSS中多个元素有一个相同的父元素，那么写样式会变得很乏味，我们需要一遍一遍的在每个元素前写这个父元素.
section {
margin: 10px;
}
section nav {
height: 25px;
}
section nav a {
color: #0982C1;
}
section nav a:hover {
text-decoration: underline;
}
相反，使用CSS预处理器，我们可以在父元素的花括号({})写这些元素。同时可以使用“&”符号来引用父选择器。
section {
margin: 10px;
nav {
height: 25px;
a {
color: #0982C1;
&:hover {
text-decoration: underline;
}
}
}
}
Extend 扩展继承
这可以说是处理器的一个亮点，你定义了一个类，后面如果有另一个类需要用到和已经定义了的类同样的属性和值，那么你可以通过@extend来直接引用已经定义的类，来再次使用它定义过的规则。
这样不会多出来很多重复代码段吗？可能你跟我有过同样的困惑，其实它生成的，是一个群组选择器，也就是多个类共用一段css样式规则，这样做的好处是，在你想定义有共性又有差异的一组元素时，不需要写多个类，只需要写它单独定义的类即可。
在多个元素应用相同的样式时，我们在CSS通常都是这样写：
p,
ul,
ol {
/* 样式写在这 */
}
这样做非常的好，但往往我们需要给单独元素添加另外的样式，这个时候我们就需要把其中选择器单独出来写样式，这样一回来我们维护样式就相当的麻烦。为了应对这个问题，CSS预处理器可以从一个选择继承另一个选择器下的所有样式。
.block {
margin: 10px 5px;
padding: 2px;
}
p {
@extend .block; /* 继承.block所有样式 */
border: 1px solid #EEE;
}
ul, ol {
@extend .block; /* 继承.block所有样式 */
color: #333;
text-transform: uppercase;
}
转译后：
.block, p, ul, ol {
margin: 10px 5px;
padding: 2px;
}
p {
border: 1px solid #EEE;
}
ul, ol {
color: #333;
text-transform: uppercase;
}
五、图片与色彩的处理
1、切图
对于CSS Sprite相信是所有切图者的主要工作产出，以前我也推荐过一些在线的制作Sprite的工具，不过现在有了Stylus。
其中for不同于Javascript，rowList为数组遍历出的一个元素，而$row为索引，可以这样理解 `for [value], [index] in [array]` 。所以可以在两个嵌套的for中获取纵横的位置以及国家代码，来生成CSS。
作为预处理工具，Stylus自然也需要预处理器，不过它不像Sass需要Ruby环境，Stylus由Javascript实现，所以有Javascript就可以处理Stylus。
2、颜色操作
如同其他CSS预处理工具一样，Stylus在颜色方面也拥有许多内置函数，无论是判断，提取还是修改都十分强大。函数 `red` , `blue` , `green` , `alpha` 将分别返回颜色对应的rgba值，`dark` 和 `light` 用于判断颜色属于亮色还是暗色，`hue` , `saturation` , `lightness` 则分别返回颜色的色相、饱和度以及亮度，其中色相是在色环上的角度，单位是deg。我经常用的是`lighten` 和 `darken` 这两个函数，其作用是增加或减少一个颜色的亮度，另外还有饱和度的操作函数 `desaturate` 和 `satucate`。
通过增加或减少百分值调整颜色亮度。颜色亮，加；暗，则减。
我们也可以通过增加或减去色度调整色调。例如，红色增加65deg就变成了黄色。
六、运算符
1、优先级qwq
下标运算符[]允许我们通过索引获取表达式内部值。括号表达式可以充当元组（如(15px 5px), (1, 2, 3)）
下面这个例子使用错误处理的元组（并展示了该结构的多功能性）：
add(a, b)
if a is a ‘unit‘ and b is a ‘unit‘
a + b
else
(error ‘a 和 b 必须是 units!‘)
body
padding add(1,‘5‘)
// => padding: error "a 和 b 必须是 units";
padding add(1,‘5‘)[0]
// => padding: error;
padding add(1,‘5‘)[0] == error
// => padding: true;
padding add(1,‘5‘)[1]
// => padding: "a 和 b 必须是 units";
这儿有个更复杂的例子。现在，我们调用内置的error()函数，当标识符（第一个值）等于error的时候返回错误信息。
if (val = add(1,‘5‘))[0] == error
error(val[1])
2、范围.. ...
同时提供包含界线操作符(..)和范围操作符(...)，见下表达式：
1..5
// => 1 2 3 4 5
1...5
// => 1 2 3 4
3、存在操作符：in
检查左边内容是否在右边的表达式中。
nums = 1 2 3
1 in nums
// => true
4、条件赋值：?= :=
条件赋值操作符?=（别名?:）让我们无需破坏旧值（如果存在）定义变量。该操作符可以扩展成三元内is defined的二元操作。
color := white
color ?= white
color = color is defined ? color : white
(Is defined 是 是否分配过了值 qwq)
5、方法
函数 函数内方法 标识符 （内置 unit 都换成了px单位 就可以无视单位了）
add(a, b = a)
a = unit(a, px)
b = unit(b, px)
a + b
add(15%, 10deg)
// => 25
可能和 属性赋值 混淆 那么加个括号 或者加个return
swap(a, b)
return (b a)
条件、别名、参数、哈希等等
下面，我们定义get(hash, key)方法，用来返回key值或null. 我们遍历每个键值对，如果键值匹配，返回对应的值。
get(hash, key)
return pair[1] if pair[0] == key for pair in hash
下面例子可以证明，语言函数模样的Stylus表达式具有更大的灵活性。
hash = (one 1) (two 2) (three 3)
get(hash, two)
// => 2
get(hash, three)
// => 3
get(hash, something)
// => null
七、区别（三者对比
1、变量
2、作用域
3、继承
- Sass和Stylus的继承非常像，能把一个选择器的所有样式继承到另一个选择器上。使用『@extend』开始，后面接被继承的选择器。
.test{
margin: 10px5px;
padding: 2px;
}
p{
@extend.test;/*继承.block*/
border: 1pxsolid#aaa;
}
ul,li{
@extend.test; /*继承.block*/
color: #aaa;
}
将被编译成标准 css：
.test,p,ul,ol {
margin: 10px5px;
padding:2px;
}
p {
border: 1px solid #aaa
}
ul,li {
color:#aaa;
}
- Less 继承：与前两者继承方式有所区别，它不是在选择器上继承，而是将Mixins中的样式嵌套到每个选择器里面。然而这样会带来一个明显的缺点：每个选择器中会出现重复的样式
不管什么原因，如果遇到Stylus搞不定的特殊需求，你可以使用@css使其作为CSS字面量解决之。
Less 的发展有 Bootstrap，Sass 的发展有 Compass
虽然各种预处理器功能强大，但使用最多的，还是以下特性：
变量（variables），代码混合（ mixins），嵌套（nested rules）以及 代码模块化(Modules)。
原生的css 也有变量的 后来出的 常常给用来 切换背景色(主题模式)
它不需要经过任何转译步骤，因为它是浏览器原生支持的 是动态的
它是DOM 的一部分
是 - - 来命名的用两个“-”开头表示声明变量，
如：--white-color: #FFF
用var(...)引用变量值，
如：background: var(--white-color)
在vue中使用stylus
概述什么是StylusStylus是一个CSS预处理器。什么是CSS预处理器关于CSS预处理器，推荐先行阅读这篇文章：为您详细比较三个CSS预处理器（框架）：Sass、LESS和Stylus现在你应该对CSS预处理器有个大概的认识了，总的来说，CSS预处理器... 查看详情
css预处理器（框架）初探：sassless和stylus
现在最为普遍的三款CSS预处理器框架，分别是Sass、LessCSS、Stylus。拿less来说，可以在页面上直接使用less文件，但要引用less.js进行解析；同时也可以直接将less输出为css文件。推荐使用后者。最常用的less编译输出css工具：与node.js... 查看详情
sassless和stylus区别总结(代码片段)
1.什么是CSS预处理器CSS预处理器是一种语言用来为CSS增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让CSS更见简洁，适应性更... 查看详情
vue使用stylus样式预处理器
vue使用stylus样式预处理器,样式总是报错，需要从上一行的样式回车换行才不会报错 <stylelang="stylus"scoped>.navbar margin-bottom:1rem &>.nav padding:20px </style> 查看详情
（转）预处器的对比——sassless和stylus
英文原文：http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout原文链接：http://www.w3cplus.com/css/sass-vs-less-vs-stylus-a-preprocessor-shootout.html介绍CSS预处理器是一种 查看详情
css预处理器
相关问题CSS主要有哪些预处理器为什么需要用预处理器各预处理器优缺点回答关键点Sass Less Stylus PostCSS 工程化 提升效率CSS本身不属于可编程语言，当前端项目逐渐庞大之后CSS的维护也愈加困难。CSS预处理器所... 查看详情
stylusless和sass的区别
CSS预处理器技术已经非常的成熟了，而且也涌现出了越来越多的CSS的预处理器框架。本文便总结下Sass、LessCSS、Stylus这三个预处理器的区别和各自的基本语法。1.什么是CSS预处理器CSS预处理器是一种语言用来为CSS增加一些编程的... 查看详情
stylus安装使用图解
Stylus 是一个CSS的预处理框架，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，所以 Stylus 是一种新型语言，可以创建健壮的、动态的、富有表现力的CSS。比较年轻，其本质上做的事情与 SASS/LESS... 查看详情
stylus
...具，LESS，SASS都在这方面做了一些贡献。Stylus是一个CSS的预处理框架，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，所以Stylus是一种新型语言，可以创建健壮的、动态的、富有表现力的CSS。比较年轻，其本... 查看详情
04.预处理器
CSS预处理器是一种语言，用来为CSS增加一些编程的的特性，无需考虑浏览器的兼容性问题，并且你可以在CSS中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的CSS更简洁，适应性更强，代码更直观... 查看详情
css预处器的对比——sassless和stylus
预处器的对比——Sass、LESS和Stylus转载：英文原文：http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout中文译文：http://www.w3cplus.com/css/sass-vs-less-vs-stylus-a-preprocesso 查看详情
stylus基本使用(代码片段)
...。发现文件后缀是.styl的这个哥们儿学名叫stylus，是CSS的预处理框架。CSS预处理，顾名思义，预先处理CSS。那stylus咋预先处理呢？stylus给CSS添加了可编程的特性，也就是说，在stylus中可以使用变量、函数、判断、循环一系列CSS没... 查看详情
sass学习之路——sass简介
Sass是CSS的一种预处理器语言，类似的语言还有Less，Stylus等。 那么什么是CSS预处理器？CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开... 查看详情
css预处理器sass--sasslessstylus比较
前言：本节主要学习下Sass、Less、Stylus在使用方面的异同。1.环境安装配置区别。 <1>Sass环境配置？ Sass的底层是Ruby语言开发的，安装Sass前提需要先安装Ruby，安装过程参考 https://www.cnblogs.com/diweikang/p/9609825.html... 查看详情
coffeescript、jade、stylus -> js、css 资产管理器？节点.js
】coffeescript、jade、stylus->js、css资产管理器？节点.js【英文标题】：coffeescript,jade,stylus->js,cssassetmanager?node.js【发布时间】：2012-02-1813:07:42【问题描述】：我从事咖啡脚本、玉石和手写笔的工作。我的应用程序服务于两个不同... 查看详情
vue--stylus入门使用方法
... SASS都在这方面做了一些贡献。Stylus 是一个CSS的预处理框架，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，所以 Styl 查看详情
sass
“CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题在众多优秀的CSS预处理器语言中就属 Sass、LESS&nbs... 查看详情
css之sasslessstylus预处理器的使用方式与区别
更详细区别参考文档：https://blog.csdn.net/pedrojuliet/article/details/72887490使用变量： sass： 使用$符号定义变量，如：$base_color:#efefef less：使用@符号定义变量，如：@base_font_size:16px stylus:对变量没有任何设定（变量不... 查看详情