# Stylus预处理器完整语法与项目实战详细代码案例
## 一、文档简介
Stylus 是一款简洁高效的 CSS 预处理器，舍弃大量冗余符号，支持变量、嵌套、混合、函数、条件判断、循环等高级特性，大幅简化样式开发。本文梳理 Stylus 核心语法，并提供可直接编译运行的完整实战代码，适配前端Vue、静态页面等项目场景。

## 二、环境快速搭建
### 1. 全局安装依赖
```bash
npm install stylus stylus-loader -g
```
### 2. 编译命令
```bash
# 单文件编译
stylus index.styl -o index.css
# 监听文件自动编译
stylus -w index.styl -o index.css
```

## 三、基础语法代码演示
### 3.1 变量与运算符
Stylus 无需分号、大括号、冒号，书写极简。
```stylus
// 定义变量
primary-color = #2563eb
font-size-base = 14px
spacing = 8px

// 运算
box-padding = spacing * 2
border-radius = spacing / 2

.card
  color primary-color
  font-size font-size-base
  padding box-padding
  border-radius border-radius
```
编译后 CSS：
```css
.card {
  color: #2563eb;
  font-size: 14px;
  padding: 16px;
  border-radius: 4px;
}
```

### 3.2 选择器嵌套 & 父级引用&
```stylus
.nav
  height 60px
  background #fff

  a
    display inline-block
    padding 0 12px
    color #333

    &:hover
      color primary-color

  &.dark
    background #1a1a1a
    a
      color #fff
```

### 3.3 Mixin 混合宏（复用样式）
```stylus
// 通用圆角阴影混合
card-shadow(radius = 6px)
  border-radius radius
  box-shadow 0 2px 12px rgba(0,0,0,0.08)

// 调用
.goods-card
  card-shadow(10px)
  padding 16px
```

### 3.4 函数与条件判断
```stylus
// 颜色变暗函数
darken(color, num)
  rgba(color, num)

// 条件判断
bg-type = dark
.box
  if bg-type == dark
    background #222
    color #fff
  else
    background #f5f5f5
    color #333
```

### 3.5 for 循环批量样式
```stylus
// 循环生成间距类
for i in 1..6
  .mt-{i}
    margin-top i * 4px
```

## 四、综合实战完整案例
index.styl
```stylus
// 全局变量
theme-blue = #1677ff
text-gray = #666
base-space = 10px

// 混合
flex-center()
  display flex
  justify-content center
  align-items center

// 页面容器
.page-wrap
  width 1200px
  margin 0 auto
  padding base-space * 2

  .title
    font-size 20px
    color theme-blue
    margin-bottom base-space

  .list-item
    flex-center()
    height 80px
    border 1px solid #eee
    margin-bottom base-space

    .desc
      color text-gray
      margin-left base-space
```

编译输出核心CSS片段：
```css
.page-wrap {
  width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.page-wrap .title {
  font-size: 20px;
  color: #1677ff;
  margin-bottom: 10px;
}
.page-wrap .list-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  border: 1px solid #eee;
  margin-bottom: 10px;
}
.page-wrap .list-item .desc {
  color: #666;
  margin-left: 10px;
}
```

## 五、项目使用注意事项
1. 原生 CSS 兼容：如需保留分号、大括号，Stylus 完全兼容，两种写法可混用；
2. 工程化适配：Vue/Webpack 项目安装 stylus-loader 后，直接在 `<style lang="stylus">` 内编写；
3. 性能优化：大量循环代码建议编译时生成静态CSS，避免运行时计算；
4. 变量作用域：块内变量仅当前选择器生效，全局变量统一写在文件顶部管理。

海量精选技术文档和实战案例持续更新，敬请关注【风骏时光少年】

Stylus 是一款简洁高效的 CSS 预处理器，舍弃大量冗余符号，支持变量、嵌套、混合、函数、条件判断、循环等高级特性，大幅简化样式开发。本文梳理 Stylus 核心语法，并提供可直接编译运行的完整实战代码，适配前端Vue、静态页面等项目场景。

Stylus预处理器完整语法与项目实战详细代码案例

前端

开发工具

学习Stylus预处理器核心语法与实战应用，掌握变量、嵌套、混合、函数等高级特性，提升CSS开发效率。提供完整代码案例，涵盖环境搭建、基础语法到项目实战，适配Vue/Webpack等前端工程化场景。

容器

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

Stylus预处理器完整语法与项目实战详细代码案例-腾讯云开发者社区-腾讯云

Stylus预处理器完整语法与项目实战详细代码案例

Stylus预处理器完整语法与项目实战详细代码案例

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐