用Stylus写出优雅的CSS：从凌乱到专业的样式进化之路

FogLetter
81 阅读3分钟

大家好，我是FogLetter，今天想和大家分享一个让我的前端开发效率提升200%的神器——Stylus。作为一个CSS预处理器，Stylus不仅让我的代码更加简洁优雅，还让我重新爱上了写样式这件事！

为什么我们需要CSS预处理器？

还记得刚开始学习前端时写CSS的痛苦经历吗？重复的代码、难以维护的选择器、缺乏变量和函数的概念...CSS虽然简单易学，但随着项目规模增大，它就显得力不从心了。

这时候，CSS预处理器应运而生。它们为CSS带来了编程语言的特性，让我们能够用更高效的方式编写样式。在众多预处理器中，我最终选择了Stylus，原因很简单：

  1. 极简语法：去掉所有不必要的符号，连大括号和分号都不要
  2. 强大功能：变量、混合(mixin)、函数、继承等一应俱全
  3. 灵活扩展：可以自定义函数和插件

从零开始配置Stylus

先来看看如何快速上手Stylus：

npm install -g stylus  # 全局安装
stylus --version      # 检查版本

安装完成后，我们就能将.styl文件编译成浏览器能识别的.css文件了：

stylus -w common.styl -o common.css

这里的-w表示监听文件变化，-o指定输出文件。这样我们就能边写边看效果，开发体验极佳！

Stylus vs 原生CSS：代码对比

让我们通过一个实际案例来看看Stylus的优势。以下是项目中的HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover">
    <title>Document</title>
    <link rel="stylesheet" href="./common.css">
</head>
<body>
    <div class="wrapper">
        <h2>Local TAPAS</h2>
        <p>请添加您的TAPAS</p>
        <ul class="plates">
            <li>Loading Tapas...</li>
        </ul>
        <form class="add-items">
            <input type="text" placeholder="Item Name" required name="item">
            <input type="submit" value="+ Add Item">
        </form>
    </div>
    <script src="./common.js"></script>
</body>
</html>

原生CSS实现

如果用原生CSS写样式，代码会是这样的：

html {
  box-sizing: border-box;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: url("http://wes.io/hx9M/oh-la-la.jpg") center no-repeat;
  background-size: cover;
}
* {
  box-sizing: border-box;
}
.wrapper {
  padding: 20px;
  min-width: 350px;
  background: rgba(123,255,255,0.95);
  box-shadow: 0 0 0px 10px rgba(0,0,0,0.1);
}
.wrapper h2 {
  text-align: center;
  margin: 0;
  font-weight: 200;
}
/* 更多样式... */

Stylus实现

同样的样式，用Stylus写出来是这样的：

$background_color = rgba(123,255,255,0.95)

html
  box-sizing border-box
  min-height 100vh
  display flex
  flex-direction column
  justify-content center
  align-items center
  text-align center
  background url('http://wes.io/hx9M/oh-la-la.jpg') center no-repeat
  background-size cover

*
  box-sizing border-box

.wrapper
  padding 20px
  min-width 350px
  background $background_color
  box-shadow: 0 0 0px 10px rgba(0,0,0,0.1)
  h2 
    text-align center
    margin 0
    font-weight 200
/* 更多样式... */

看出区别了吗？Stylus版本：

  1. 使用了变量$background_color，方便复用
  2. 省略了大括号和分号，代码更简洁
  3. 嵌套结构让选择器关系一目了然
  4. 缩进代替层级，视觉上更加清晰

Stylus的核心特性解析

1. 变量：让样式可维护

Stylus支持变量，这在管理主题色、间距、字体等重复使用的值时特别有用：

$primary-color = #3498db
$spacing-unit = 8px

.button
  background $primary-color
  padding $spacing-unit * 2

2. 嵌套：清晰的层级关系

嵌套是Stylus最受欢迎的特性之一，它让选择器的层级关系变得直观：

.nav
  background #333
  ul
    margin 0
    padding 0
    li
      display inline-block
      a
        color white
        text-decoration none

3. 混合(Mixins)：复用样式块

Mixins就像函数一样，可以定义一组样式并在多处复用：

border-radius(n)
  -webkit-border-radius n
  -moz-border-radius n
  border-radius n

.button
  border-radius(5px)

4. 继承：减少重复代码

通过@extend可以继承已有样式，减少代码重复：

.message
  padding 10px
  border 1px solid #eee

.success
  @extend .message
  border-color green

5. 运算：动态计算值

Stylus支持各种运算，让样式更加灵活：

.container
  width 100% - 30px
  font-size 12px + 2

实战技巧：打造完美的响应式背景

在我们的例子中，有一个很棒的背景图实现：

html
  background url('http://wes.io/hx9M/oh-la-la.jpg') center no-repeat
  background-size cover

这里有两个关键点值得注意：

  1. background-size: cover - 等比例缩放背景图，确保覆盖整个容器，可能会裁剪部分图片
  2. background-size: contain - 等比例缩放但不裁剪，确保完整显示图片

在移动端开发中，我们还需要注意viewport的设置：

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover">

这里的user-scalable=no禁止用户缩放页面，确保设计的一致性；viewport-fit=cover则让网页内容填满整个屏幕。

继承与层叠的艺术

CSS中有一些属性会继承，比如color、font-family等，而有些则不会。Stylus让我们能更好地管理这些继承关系：

body
  color #333  // 子元素会继承
  font-family 'Arial'

.plates
  li
    border-bottom 1px solid rgba(0,0,0,0.2)  // 不会继承
    padding 10px 0

常见问题与解决方案

1. 如何组织大型项目的Stylus文件？

我推荐按功能或组件拆分文件，然后通过@import合并：

styles/
|- base/
|  |- variables.styl
|  |- reset.styl
|- components/
|  |- button.styl
|  |- form.styl
|- main.styl

在main.styl中：

@import 'base/variables'
@import 'base/reset'
@import 'components/button'
@import 'components/form'

2. 如何解决浏览器兼容性问题？

使用nib这样的插件可以自动处理前缀问题：

@import 'nib'

.box
  display flex
  transform scale(1.5)

3. 如何与团队保持一致的编码风格？

建议制定团队规范，比如：

  • 变量命名：$primary-color或$primaryColor
  • 嵌套层级不超过3层
  • Mixin命名使用动词形式：center-block()

从CSS到Stylus的思维转变

刚开始使用Stylus时，最大的挑战不是语法，而是思维方式的转变。我们需要：

  1. 拥抱缩进：忘记大括号，让缩进决定层级
  2. 善用变量：把重复的值提取为变量
  3. 组件化思维：把样式看作可复用的组件
  4. 函数式思考：用Mixins和函数减少重复

性能优化小贴士

虽然Stylus提供了很多便利功能，但也要注意性能：

  1. 避免过度嵌套（不超过4层）
  2. 谨慎使用@extend，它可能导致CSS体积增大
  3. 合并相似的样式规则

结语：为什么我选择Stylus

  1. 极简主义：去掉所有不必要的符号，专注于样式本身
  2. 灵活性：既支持类似Python的缩进语法，也兼容原生CSS写法
  3. 强大功能：拥有其他预处理器所有的核心功能
  4. JavaScript友好：与Node.js生态完美融合

Stylus不仅提高了我的开发效率，还让写样式变成了一种享受。如果你还在为CSS的繁琐而烦恼，不妨试试Stylus，相信它也会成为你的得力助手！

希望这篇笔记对你有帮助！如果你有任何Stylus使用心得或问题，欢迎在评论区留言讨论。

avatar
文章
阅读
粉丝