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 ...
随机推荐
- zookeeper windows 安装
下载 zookeeper 下载地址为: https://zookeeper.apache.org/releases.html. 选择一个地址点击版本下载: 配置 下载后解压到指定磁盘的 zookeep ...
- linux php安装mongodb 扩展
下载扩展 首先从这个网站选择适合你当前 php 版本的的 mongodb 扩展 https://pecl.php.net/package/mongodb wget https://pecl.php.n ...
- Ansible忽略任务失败
在默认情况下,任务失败时会中止剧本任务,不过可以通过忽略失败的任务来覆盖此类行为.在可能出错且不影响全局的段中使用ignore_errors关键词来达到目的. 环境: 受控主机清单文件: [dev] ...
- 【Docker】DockerFile解析
DockerFile解析 中文官网 英文官网 是什么 Dockerfile是用来构建Docker镜像的构建文件,是由一系列命令和参数构成的脚本. 构建三步骤 注意:Dockerfile可以构建出镜像, ...
- WebKit Inside: 渲染树
经过CSS的匹配,就要进入渲染树的构建. 渲染树也叫RenderObject树,因为渲染树上每一个节点,都是RenderObject的子类. 首先来看一下RenderObject的继承类图. 1 Re ...
- OpenEuler RISC-V 上跑bitcoin（实战版）
不久前刚在OpenEuler 24.09 RISC-V上部署了 bitcoin,不过还没跑起来,这次我打算在这个环境下面运行一些应用服务,体验一下 OERV 的开发感觉. 编译出来的 bitc ...
- Unity3d中协程的原理，你要的yield return new xxx的真正理解之道
- Python+Appium+unittest案例
代码如下: # coding=utf-8 import time import unittest from appium import webdriver class MyTestCase(unitt ...
- python操作PC版微信，给指定好友发信息（键鼠操作和复制粘贴相关库）
主要用来"pyautogui"."pyperclip"两个模块 pyautogui 主要用于控制键盘和鼠标操作.详细参考https://blog.csdn.ne ...
- Junit单元测试的Gradle设置
官方文档 https://docs.gradle.org/current/userguide/java_testing.html test{ useJUnit() //指定使用junit执行测试. / ...