stylus - 新生代CSS预处理框架

stylus是什么

Stylus 是一种 CSS 预处理器,它扩展了 CSS 的功能,使得编写样式变得更简洁和高效。Stylus 允许使用嵌套、变量、混入等编程功能,这些功能可以极大地提高开发效率和代码的可维护性。

stylus中文文档

stylus.uihtm.com

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

shell 复制代码
## 安装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代码

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部分:

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 允许省略分号和大括号,利用缩进来表示嵌套结构, 当然如果你愿意,也可以使用大括号和分号

css 复制代码
*
    margin 0
    padding 0

ul,li
    list-style none

设置容器样式:

Stylus 支持样式的嵌套,使得样式表更具层次感和组织性

  • 使用弹性布局和子元素flex比例分配实现等比例以及两倍比例
  • 使用hover状态,修改相应li的flex:2
  • li上设置css,transition过渡动画
  • 使用:nth-child设置不同元素的颜色
css 复制代码
  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 提供了强大的功能,但编写清晰、易于维护的代码依然至关重要。使用模块化的方式组织样式,避免样式冲突,提升代码的可读性。

相关推荐
小磊哥er2 分钟前
【前端工程化】前端开发中的这些设计规范你知道吗
前端
江城开朗的豌豆3 分钟前
路由守卫:你的Vue路由‘保安’,全局把关还是局部盯梢?
前端·javascript·vue.js
Jinxiansen021110 分钟前
Vue 3 响应式核心源码详解(基于 @vue/reactivity)
前端·javascript·vue.js
OEC小胖胖5 小时前
去中心化身份:2025年Web3身份验证系统开发实践
前端·web3·去中心化·区块链
Cacciatore->6 小时前
Electron 快速上手
javascript·arcgis·electron
vvilkim6 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
某公司摸鱼前端7 小时前
ES13(ES2022)新特性整理
javascript·ecmascript·es13
ai小鬼头8 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz8 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子8 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app