Stylus基本使用

介绍

在学习一个 Vue.js 项目的过程中，注意到源码中样式的部分并没有用熟悉的 .css 样式文件，而是发现了代码长得和 CSS 相像的 .styl 文件。这个 .styl 以前没见过啊，你是谁？于是开始一顿搜索。

发现文件后缀是. styl 的这个哥们儿学名叫 stylus，是 CSS 的预处理框架。

CSS 预处理，顾名思义，预先处理 CSS。那 stylus 咋预先处理呢？stylus 给 CSS 添加了可编程的特性，也就是说，在 stylus 中可以使用变量、函数、判断、循环一系列 CSS 没有的东西来编写样式文件，执行这一套骚操作之后，这个文件可编译成 CSS 文件。

安装

首先，安装 stylus（确保之前已经安装 nodejs ）。

$ npm install stylus

安装之后，运行 stylus -h 可查看帮助。
运行 stylus example.styl 可将 demo.styl 文件编译成 example.css 文件。

基本使用

一段简单的 stylus 代码：

$background-color = lightblue
add (a, b = a)a = unit(a, px)b = unit(b, px)a + b.list-item
.text-boxspanbackground-color: $background-colormargin: add(10)padding: add(10, 5)&:hoverbackground-color: powderblue

编译后生成的 CSS 代码：

.list-item span,
.text-box span {background-color: #add8e6;margin: 20px;padding: 15px
}
.list-item:hover,
.text-box:hover {background-color: #b0e0e6;
}

由此我们看到了 stylus 代码以及由它编译而成的 CSS 代码,下面来一步一步看一看为啥编译成这样。

变量

$background-color = lightblue

上面的代码声明了变量 $background-color,并为其赋值 lightblue。
声明之后，就可以使用这个变量了：

spanbackground-color: $background-color

翻译成 CSS 就是：

span{background-color: lightblue;
}

函数

add (a, b = a)a = unit(a, px)b = unit(b, px)a + b

代码声明了函数 add, add 接受两个参数 a 和 b，其中 b 的默认值是 a。
add 中调用了 stylus 的内置函数 unit，此处，unit 函数为 a 和 b赋予了单位 px。
最后将 a 和 b 相加，并返回结果，是的，你没有看错，没有 return，但是返回了结果。
return 居然是可以省略的，很任性了。

函数调用：

spanmargin: add(10)padding: add(10, 5)

翻译成 CSS 就是：

span {margin: 20px;padding: 15px;
}

选择器

.list-item
.text-boxspanbackground-color: $background-colormargin: add(10)padding: add(10, 5)&:hoverbackground-color: powderblue

这一段是与 CSS 代码长得最像的了，虽说最为相像，可有些差别还是一眼就能看出的。
比如没有了 CSS 的花括号，没有了 CSS 的分号，却多了一些奇奇怪怪的缩进，还有那个 & 是什么鬼？还 &:hover ???
预知后事如何，这次接着分解。

先说符号，这里提到的花括号和分号在stylus中是可以省略的，不仅如此，冒号也是可以省略的，color: powderblue 你可以写成 color powderblue,没有问题。

再说缩进，先提出两个有缩进关系的选择器，上面代码片段第二行的 .text-box 和第三行的 span，其实很容易理解，这哥俩写到 CSS 里面是这样的：

.text-box span{ ... }

即 span 是 .text-box 的子选择器，stylus 中以缩进表示这种关系，更加清晰明了，好看。

还有 &，这是个新鲜东西。它是父级的引用，还是来看代码。

stylus这样写:

.list-item
.text-box&:hoverbackground-color: powderblue

翻译成 CSS 是这样：

.list-item:hover,
.text-box:hover {background-color: #b0e0e6;
}

相信代码中已经能很明确地体现出 & 父级引用的角色了。
同时，我们也不难看出，.list-item 和 .text-box 这两个同一级的选择器在 stylus 中是可以换行写的，只要保证缩进相同，它们就属于同一级的选择器。当然，沿用 CSS 的方式，将同一级的选择器用逗号分隔开在 stylus 中也是可以的。

总结

上面就是 stylus 的基本使用，普遍情况可以用上。
全面的 stylus 知识可以参考官方文档，或者张鑫旭翻译的中文文档。

转载于:https://www.cnblogs.com/Anderson-An/p/10177041.html

Stylus基本使用相关推荐

stylus使用文档总结：内置方法+参数+条件+迭代+导入+继承
一.内置方法返回各种颜色的比重(如red(color)等) 颜色函数是CSS预处里器中内置的颜色函数功能,这些功能可以对颜色值进行处理,例如颜色的变亮.变暗.渐变颜色等处理十分的方便. lighte ...
Vue 应用 Sass、Scss、Less 和 Stylus
Vue项目中应用预处理器,可以有效减少css代码量, 推荐使用Sass.Scss.Less预处理器.在创建项目的时候可以选择预处理器 (Sass/Less/Stylus). 如果当时没有选择,内置的 ...
Stylus插件开发教程
由于Stylus的强大,它支持SCSS LESS 灵活的书写方式,然后它不用像SCSS安装Ruby,不是特别出名,流行的工具没有使用它,只是在小的圈子里面挺火滴.它的强大不用赘述了,我正在使用了它开始 ...
您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus
2019独角兽企业重金招聘Python工程师标准>>> CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS ...
【二次元stylus解放css】用stylus画可爱的小丸子
用stylus画可爱的小丸子之前看了一些关于二次元用css来画卡通图画的文章,都写得非常棒,但是对于我这样一个有密集恐惧症的小白来说相当的头疼,密密麻麻的括弧和标点让人眼花缭乱,最近学习了一些关于s ...
python和sass区别_CSS 的预处理程序（Sass、LESS、Stylus 等）分别都有哪些优缺点？...
三种CSS 预处理器(框架) 历史: LESS & Sass LESS是受Sass启发而开发的工具,它列出了如下开发的理由:"为什么要开发一个Sass的替代品呢?原因很简单:首先是语 ...
Stylus插件开发教程 1
由于Stylus的强大,它支持SCSS LESS 灵活的书写方式,然后它不用像SCSS安装Ruby,不是特别出名,流行的工具没有使用它,只是在小的圈子里面挺火滴.它的强大不用赘述了,我正在使用了它.开 ...
『前端干货篇』：你不知道的Stylus
最近沉迷学习(其实大部分时间都在看英雄联盟S8总决赛),把这几天在学的Stylus做个总结.这篇文章对学习Stylus的新手来说应该会有帮助~ 为了让大家代码观赏性更好,这里的代码都以截图的方式呈现, ...
vue-cli构建的vue项目中引入stylus文件
stylus是css预处理器.还有另外两种css预处理器语言详解:less.sass. 不懂的可以先看一下这篇文章:stylus预处理入门在vue项目引入stylus css预处理器,可以让我们的c ...
stylus 在静态页面上的使用经验
前段时间做vue项目,用到了css的提升开发效率的工具stylus,感觉很好用.现在又开始写静态页面了,于是将强大的stylus拿过来继续用.于是就写了这篇使用经验,算是自己总结一下. stylus的 ...

Stylus基本使用

介绍

安装

基本使用

变量

函数

选择器

总结

Stylus基本使用相关推荐

最新文章

热门文章