介绍

在学习一个 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-box
span
background-color: $background-color
margin: add(10)
padding: add(10, 5)
&:hover
background-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
声明之后,就可以使用这个变量了:

span
background-color: $background-color

翻译成 CSS 就是:

span{
background-color: lightblue;
}

函数

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

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

函数调用:

span
margin: add(10)
padding: add(10, 5)

翻译成 CSS 就是:

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

选择器

.list-item
.text-box
span
background-color: $background-color
margin: add(10)
padding: add(10, 5)
&:hover
background-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
&:hover
background-color: powderblue

翻译成 CSS 是这样:

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

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

总结

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

Stylus的基础用法的更多相关文章

  1. PropertyGrid控件由浅入深(二):基础用法

    目录 PropertyGrid控件由浅入深(一):文章大纲 PropertyGrid控件由浅入深(二):基础用法 控件的外观构成 控件的外观构成如下图所示: PropertyGrid控件包含以下几个要 ...

  2. logstash安装与基础用法

    若是搭建elk,建议先安装好elasticsearch 来自官网,版本为2.3 wget -c https://download.elastic.co/logstash/logstash/packag ...

  3. elasticsearch安装与基础用法

    来自官网,版本为2.3 注意elasticsearch依赖jdk,2.3依赖jdk7 下载rpm包并安装 wget -c https://download.elastic.co/elasticsear ...

  4. BigDecimal最基础用法

    BigDecimal最基础用法 用字符串生成的BigDecimal是不会丢精度的. 简单除法. public class DemoBigDecimal { public static void mai ...

  5. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  6. Smarty基础用法

    一.Smarty基础用法: 1.基础用法如下 include './smarty/Smarty.class.php';//引入smarty类 $smarty = new Smarty();//实例化s ...

  7. 前端自动化测试神器-Katalon的基础用法

    前言 最近由于在工作中需要通过Web端的功能进行一次大批量的操作,数据量大概在5000左右,如果手动处理, 完成一条数据的操作用时在20秒左右的话,大概需要4-5个人/天的工作量(假设一天8小时的工作 ...

  8. Bootstrap fileinput:文件上传插件的基础用法

    官网地址:http://plugins.krajee.com/ 官网提供的样例:http://plugins.krajee.com/file-input/demo 基础用法一 导入核心CSS及JS文件 ...

  9. asyncio 基础用法

    asyncio 基础用法 python也是在python 3.4中引入了协程的概念.也通过这次整理更加深刻理解这个模块的使用 asyncio 是干什么的? asyncio是Python 3.4版本引入 ...

随机推荐

  1. 笔记-django学习链接

    form表单学习 https://www.cnblogs.com/weiman3389/p/6225075.html python字符串replace()方法 https://www.cnblogs. ...

  2. form表单学习

    1.http://www.cnblogs.com/fish-li/archive/2011/07/17/2108884.html 2.http://www.cnblogs.com/polk6/arch ...

  3. mysql以下c连接mysql数据库

    1.安装sudo yum install mysql-devel  安装组件和库 2. #include <stdio.h> #include <stdlib.h> #incl ...

  4. JDK源代码学习系列05----LinkedList

                                             JDK源代码学习系列05----LinkedList 1.LinkedList简单介绍 LinkedList是基于双向 ...

  5. DBA学习参考绝佳资料

    原文来自:pursuer.chen 原文地址:https://www.cnblogs.com/chenmh/default.aspx?page=1 [置顶]MongoDB 文章目录 2018-02-0 ...

  6. 自己定义图片的progressbar

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/zpf8861/article/details/36183455 Android系统自带的Progre ...

  7. 在Web上运行Linux—js/linux模拟器

    一个叫Fabrice Bellard 的程序员写了一段Javascript在Web浏览器中启动Linux(原网页,我把这个网页iframe在了下面),目前,你只能使用Firefox 4和Chrome ...

  8. java 获取request参数集

    request里有两个方法 request.getParameterMap(); request.getParameterNames(); 我想用这两种方法获取. 1.用request.getPara ...

  9. 对Java 静态代码块的一些了解

    一 般情况下,如果有些代码必须在项目启动的时候就执行的时候,需要使用静态代码块,这种代码是主动执行的;需要在项目启动的时候就初始化,在不创建对象的情 况下,其他程序来调用的时候,需要使用静态方法,这种 ...

  10. SVN更新的时候报断言失败解决办法

    解决办法:没啥好方法,重新检出代码就好使了.