前端学习笔记系列一:6 一种新的css预编译器stylus
stylus是 CSS 的预处理框架。CSS 预处理,顾名思义,预先处理 CSS。那 stylus 咋预先处理呢?stylus 给 CSS 添加了可编程的特性,也就是说,在 stylus 中可以使用变量、函数、判断、循环一系列 CSS 没有的东西来编写样式文件,执行这一套骚操作之后,这个文件可编译成 CSS 文件。
(1)安装
首先,安装 stylus(确保之前已经安装 nodejs )。
$ npm install stylus
安装之后,运行 stylus -h 可查看帮助。
运行 stylus example.styl 可将 demo.styl 文件编译成 example.css 文件。
(2)基本使用
一段简单的 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 接受两个参数 a 和 b,其中 b 的默认值是 a。
add 中调用了 stylus 的内置函数 unit,此处,unit 函数为 a 和 b赋予了单位 px。
最后将 a 和 b 相加,并返回结果,是的,你没有看错,没有 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 中也是可以的。
前端学习笔记系列一:6 一种新的css预编译器stylus的更多相关文章
- 前端学习笔记系列一:5 在项目中引入阿里图标icon
进入到阿里的图标库网站,里面有上百万种icon,https://www.iconfont.cn,需要注册一个帐号,然后进入到这个页面,在这里点击右下角的带加号的图标,创建一个新的项目,名称与你要使用图 ...
- (转)Python学习笔记系列——Python是一种纯粹的语言
此文出自知乎灵剑,原文传送门:https://zhuanlan.zhihu.com/p/23926957. 在摸索适合自己的语言学习方法,看到一篇好文章,转之,侵删. Python的语法范式相当多.知 ...
- 前端学习笔记系列一:15vscode汉化、快速复制行、网页背景图有效设置、 dl~dt~dd标签使用
ctrl+shift+p,调出configure display language,选择en或zh,若没有则选择安装使用其它语言,则直接呼出扩展程序搜索界面,选择,然后安装,重启即可. shift+a ...
- 前端学习笔记系列一:13new Date()的参数
前两天发现手机页面的倒计时在Android上正常显示,在iPhone却不能显示. 后来又发现在ff和ie里也不显示.(以前只在chrome里看过,显示正常). 后来同事改了new Date()里字符串 ...
- 前端学习笔记系列一:12 js中获取时间new date()的用法
获取时间: 1 var myDate = new Date();//获取系统当前时间 获取特定格式的时间: 1 myDate.getYear(); //获取当前年份(2位) 2 myDate.get ...
- 前端学习笔记系列一:9 js中数组的拷贝
拷贝分为浅拷贝和深拷贝,在JavaScript中能够实现这两种拷贝的方式也是多种多样.以下是一维数组实现深拷贝和浅拷贝的各种方式. 一.浅拷贝 1.赋值 赋值是最直接的一种浅拷贝. let arr3 ...
- 前端学习笔记系列一:11@vue/cli3.x中实现跨域的问题
由于浏览器的同源访问策略,vue开发时前端服务器通常与后端api服务器并非是相同的服务器,因此需要使用一个代理服务器实现跨域访问.在@vue/cli3.x根目录下创建一个vue.config.js文件 ...
- 前端学习笔记系列一:14 vue3.X中alias的配置
第一步: 第二步: // vue.config.js module.exports = { configureWebpack: { resolve: { alias: { 'assets': '@/a ...
- 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap
1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...
随机推荐
- DVWA的文件上传漏洞(high)
1.使用文件包含漏洞和文件上传漏洞,来连接shell 文件包含漏洞详细的漏洞介绍:https://blog.csdn.net/Vansnc/article/details/82528395 文件包含函 ...
- ETCD成员维护
# For each machine TOKEN=my-etcd-token-1 CLUSTER_STATE=new NAME_1=etcd-node-1 NAME_2=etcd-node-2 NAM ...
- java里判断字符串是否为数字类型的方法
String type = "数字类型";if(StringUtils.isNotBlank(value)){ //区分正负数 if(value.startsWith(" ...
- 第四节:Vuejs组件及组件之间的交互
一. 组件及其交互 1.组件的注册 (1).全局注册 Vue.component('组件名称', { }) 第1个参数是标签名称,第2个参数是一个选项对象. 选项参数包括 data:必须是一个func ...
- php 随机生成汉字
function getChar($num) // $num为生成汉字的数量 { $b = ''; for ($i=0; $i<$num; $i++) { // 使用chr()函数拼接双字节汉字 ...
- 为PHP开发搭建环境
为了能在自己的电脑上(mac OS系统)开始编写PHP代码并完成运行,需要有: 1.安装Web服务器 2.安装PHP 3.安装数据库,比如MySQL 4.一个PHP的IDE 为了上面所提到的1~3步的 ...
- Servlet详细介绍
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" ...
- DOMContentLoaded 事件
DOMContentLoaded 事件 字面上看,它会在dom加载完成后触发. 与window.onload事件非常相似,但有一定区别: DOMContentLoaded 事件是在文档完全加载和解析之 ...
- 【转】issue management in your test project
What is Issue Management? Issue Management is the process to make others aware of the problem and th ...
- python 基础之简单购物车小程序实现
购物车 all_list = [ ('mac',9000), ('kindle',900), ('tesla',800), ('python',105), ('bile',2000), ] savin ...