stylus - 新生代CSS预处理框架
stylus是什么
Stylus 是一种 CSS 预处理器，它扩展了 CSS 的功能，使得编写样式变得更简洁和高效。Stylus 允许使用嵌套、变量、混入等编程功能，这些功能可以极大地提高开发效率和代码的可维护性。
stylus中文文档
Stylus背景介绍
Stylus，2010年产生，来自于Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如Sass和LESS。
Stylus被称为是一种革命性的新语言，提供一个高效、动态、和使用表达方式来生成CSS，以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。
什么是CSS预处理器
CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
CSS预处理器技术已经非常的成熟，而且也涌现出了很多种不同的CSS预处理器语言，比如说：Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等。如此之多的CSS预处理器，那么“我应该选择哪种CSS预处理器？”也相应成了最近网上的一大热门话题，在Linkedin、Twitter、CSS-Trick、知呼以及各大技术论坛上，很多人为此争论不休。相比过计我们对是否应该使用CSS预处理器的话题而言，这已经是很大的进步了。
到目前为止，在众多优秀的CSS预处理器语言中就属Sass、LESS和Stylus最优秀，讨论的也多，对比的也多。本文将分别从他们产生的背景、安装、使用语法、异同等几个对比之处向你介绍这三款CSS预处理器语言。相信前端开发工程师会做出自己的选择——我要选择哪款CSS预处理器。
stylus使用
安装stylus
## 安装stylus包：
npm i -g stylus
- 生成css文件：stylus common.styl -o common.css
其中common.styl是.styl文件的名字，common.css是我们所熟知的css文件。xx.styl文件写下的代码会在xx.css中正确编译。 - 监听文件变化：stylus -w common.styl -o common.css
这样我们在common.styl 写下的代码会实时编译进 common.css，便捷高效
总结
Stylus 的优势
简洁性和可读性: Stylus 的嵌套功能使得 CSS 代码更加简洁易读。通过缩进代替大括号，减少了样式文件的复杂度，使得维护和阅读代码变得更加直观。
功能强大: Stylus 提供了丰富的功能，如变量、混入、函数等，使得 CSS 编写更具编程能力。这些特性不仅减少了重复代码，还提高了样式表的复用性和可维护性。
高效的开发体验: Stylus 支持自动编译和实时监控文件变化，帮助开发者快速看到样式更改的效果。这种高效的开发流程减少了开发时间，提高了生产力。
stylus实例
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手风琴</title>
<link rel="stylesheet" href="./common.css">
</head>
<body>
<ul class="accordion">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
传统css部分：
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
.accordion {
display: flex;
width: 600px;
height: 200px;
}
.accordion li {
flex: 1;
cursor: pointer;
transition: all 300ms;
text-align: center;
line-height: 200px;
}
.accordion li:nth-child(1) {
background-color: #51100b;
}
.accordion li:nth-child(2) {
background-color: #7e1212;
}
.accordion li:nth-child(3) {
background-color: #8b3a3a;
}
.accordion li:nth-child(4) {
background-color: #9b5757;
}
.accordion li:nth-child(5) {
background-color: #cf8080;
}
.accordion li:nth-child(6) {
background-color: #f1bfbf;
}
.accordion li:hover {
flex: 2;
background-color: #fff;
}
效果图：
Stylus改写样式
stylus 让css拥有各项编程能力，在嵌套 + 模块化能力上有明显体现
设置全局样式，Stylus 允许省略分号和大括号，利用缩进来表示嵌套结构， 当然如果你愿意，也可以使用大括号和分号
*
margin 0
padding 0
ul,li
list-style none
设置容器样式：
Stylus 支持样式的嵌套，使得样式表更具层次感和组织性
- 使用弹性布局和子元素flex比例分配实现等比例以及两倍比例
- 使用hover状态，修改相应li的flex：2
- li上设置css，transition过渡动画
- 使用：nth-child设置不同元素的颜色
li
flex 1
cursor pointer
transition all 300ms
text-align center
line-height 200px
&:nth-child(1)
background-color rgb(81, 16, 11)
&:nth-child(2)
background-color rgb(126, 18, 18)
&:nth-child(3)
background-color rgb(139, 58, 58)
&:nth-child(4)
background-color rgb(155, 87, 87)
&:nth-child(5)
background-color rgb(207, 128, 128)
&:nth-child(6)
background-color rgb(241, 191, 191)
&:hover
flex 2
background-color rgb(255, 255, 255)
以上，我们通过stylus就快速完成了这个手风琴效果
高级 CSS 选择器：
- 兄弟选择器：选择紧随其后的兄弟元素。用于设置 article 元素之间的间距。
- ~ 相邻同层选择器：选择在指定元素之后的同层兄弟元素，用于控制内容的显示。
- :checked 伪类选择器：用于选中状态的元素，适用于 checkbox 和 radio 元素。
- :nth-child(n) 和 :nth-of-type(n) ：选择第 n 个子元素或同类型的第 n 个子元素。
实践建议
熟练掌握 Stylus 的语法和功能: 理解并运用 Stylus 的各种特性，如嵌套、变量、混入等，可以显著提升你的样式表的编写效率和质量。
关注代码可维护性: 尽管 Stylus 提供了强大的功能，但编写清晰、易于维护的代码依然至关重要。使用模块化的方式组织样式，避免样式冲突，提升代码的可读性。
stylus - 新生代CSS预处理框架的更多相关文章
- CSS预处理框架：less，scss
CSS预处理器:less和sass:CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用 变量.简单的程序逻辑.函数等等在编程语言中 ...
- 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)
一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...
- 前端笔记之Vue（三）生命周期&CSS预处理&全局组件&自定义指令
一.Vue的生命周期 生命周期就是指一个对象的生老病死的过程. 用Vue框架,熟悉它的生命周期可以让开发更好的进行. 所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和 ...
- CSS预处理语言
CSS预处理语言 Less,Sass,Stylus 安装 Less yarn add less 运行命令 ./node_modules/.bin/lessc 嵌套规则 Less.Sass嵌套规则一样 ...
- 前端面试：css预处理
css预处理定义: 定义了一种新的语言,其基本思想是用一种专门编程语言,为css增加了一些编程的特性,将css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作. 几种预处理语言 sass l ...
- Less：Less（CSS预处理语言）
ylbtech-Less:Less(CSS预处理语言) Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题 ...
- CSS预处理器之less和sass
CSS预处理器 1. 基于CSS的另一种语言 2. 通过工具编译成CSS 3. 添加了很多CSS不具备的特性 4. 能提升CSS文件的组织方式 ...
- Webpack实战（六）：如何优雅地运用样式CSS预处理
上一篇文章中,我主要分享了<Webpack如何分离样式文件>CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序,css预处理指的是在开发中我们经常会使用一些样式预编译 ...
- CSS预处理器之SASS用法指南
CSS预处理器之SASS用法指南 一.什么是SASS Sass是是一种基于ruby编写的CSS预处理器,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 诞生于200 ...
- html css js 框架
html css js 框架 Bootstrap http://www.bootcss.com/ http://www.cnblogs.com/aehyok/p/3404867.html ...
随机推荐
- vim使用技巧记录
1.查找 '/' + 要找的字符串(正则表达式) + Enter # 查找偏移 'n': 查找下一个 'N': 查找上一个 大小写敏感性:字符串尾接\c不敏感,\C敏感 可以~/.vimrc在配置中配 ...
- hexo 图片添加水印（png, jpeg, jpg, gif）
文章同步发布:https://blog.jijian.link/2020-04-21/hexo-watermark/ 本文折腾 hexo 图片添加水印功能,大部分代码沿用: nodejs 图片添加水印 ...
- 在 Go 中恰到好处的内存对齐
问题 type Part1 struct { a bool b int32 c int8 d int64 e byte } 在开始之前,希望你计算一下 Part1 共占用的大小是多少呢? func m ...
- php-fpm 启动后没有监听端口9000
netstat -tpln未发现监听9000端口.查看/var/log/php7-fpm.log一切正常. 随后查看PHP配置文件:/usr/local/php/etc/php-fpm.conf (源 ...
- Linux下如何重启Oracle
操作步骤 切换到oracle用户 su – oracle 通过sqlplus以管理员身份登录 sqlplus / as sysdba 然后执行 shutdown immediate 退出sqlplus ...
- js 小数取整
小数取整 var num = 123.456; // 常规方法 console.log(parseInt(num)); // 123 // 双重按位非 console.log(~~num); // 1 ...
- leetcode每日一题：对角线上不同值的数量差
题目 2711. 对角线上不同值的数量差 给你一个下标从 0 开始.大小为 m x n 的二维矩阵 grid ,请你求解大小同样为 m x n 的答案矩阵 answer . 矩阵 answer 中每个 ...
- 多线程，Join()
一.定义:就是该线程是指的主线程等待子线程的终止.也就是在子线程调用了join()方法,后面的代码,只有等到子线程结束了才能执行 二.不加join: class Thread1 extends Thr ...
- Asp.net mvc基础（九）使用DropDownList下拉列表
第一种下拉列表写法: 后端 前端 第二种下拉列表写法: 使用Html辅助方法@Html.DropDownList("名称","List<SelectListItem ...
- 遍历表单数据，检查其中任意一项的方法（Get Matching Xpath Count指令的用法）
如上图,每次新增数据均显示在最上面,且这个表格没有自定义查询的功能. 这给校验添加数据是否成功增加了难度(常规方式是检查第一行数据) 本次案例的逻辑是 使用Get Matching Xpath Cou ...