Stylus 模块化与导入 #

// 导入文件
@import 'variables'
@import 'mixins'
@import 'base/reset'

// 只导入一次，避免重复
@require 'variables'
@require 'variables'  // 不会重复导入

// @import 会重复导入
@import 'variables'
@import 'variables'  // 会重复导入

// 推荐：使用 @require 避免重复
@require 'variables'
@require 'mixins'
@require 'functions'

// 相对于当前文件
@import './variables'
@import '../mixins/common'
@import './components/buttons'

// 使用配置的路径
@import 'nib'  // 从 node_modules 导入

# 命令行
stylus -I ./src/styles/imports main.styl

# Node.js API
stylus(str)
  .include('./src/styles/imports')
  .render(...)

styles/
├── _variables.styl    # 部分文件
├── _mixins.styl       # 部分文件
├── _functions.styl    # 部分文件
└── main.styl          # 主文件

// 导入时可以省略下划线和扩展名
@import 'variables'
@import 'mixins'

styles/
├── abstracts/           # 抽象层（不直接输出样式）
│   ├── _variables.styl  # 变量
│   ├── _mixins.styl     # 混入
│   ├── _functions.styl  # 函数
│   └── _index.styl      # 统一导出
│
├── base/                # 基础样式
│   ├── _reset.styl      # 重置
│   ├── _typography.styl # 排版
│   └── _base.styl       # 基础元素
│
├── components/          # 组件
│   ├── _buttons.styl
│   ├── _cards.styl
│   ├── _forms.styl
│   └── _index.styl
│
├── layout/              # 布局
│   ├── _header.styl
│   ├── _footer.styl
│   ├── _sidebar.styl
│   └── _grid.styl
│
├── pages/               # 页面特定样式
│   ├── _home.styl
│   └── _about.styl
│
├── themes/              # 主题
│   ├── _light.styl
│   └── _dark.styl
│
└── main.styl            # 主入口文件

// main.styl

// 抽象层（变量、混入、函数）
@require 'abstracts'

// 基础样式
@require 'base/reset'
@require 'base/typography'
@require 'base/base'

// 布局
@require 'layout/grid'
@require 'layout/header'
@require 'layout/footer'
@require 'layout/sidebar'

// 组件
@require 'components'

// 页面
@require 'pages/home'
@require 'pages/about'

// 主题
@require 'themes/light'

// abstracts/_index.styl
@require 'variables'
@require 'mixins'
@require 'functions'

// components/_index.styl
@require 'buttons'
@require 'cards'
@require 'forms'

// 导入 CSS 文件（保留 @import 语句）
@import 'normalize.css'

// 编译后保留
// @import 'normalize.css';

// 使用 @css 块内联 CSS
@css {
  .legacy-element {
    *zoom: 1;
  }
}

// 条件导入
theme = 'dark'

if theme == 'dark'
  @require 'themes/dark'
else
  @require 'themes/light'

// 功能开关
features = {
  animations: true,
  icons: true,
  charts: false
}

if features.animations
  @require 'components/animations'

if features.icons
  @require 'components/icons'

if features.charts
  @require 'components/charts'

// _variables.styl
primary-color = #3498db

// main.styl
@require 'variables'

.button
  background-color primary-color  // 可访问

// _mixins.styl
border-radius(radius)
  border-radius radius

// main.styl
@require 'mixins'

.button
  border-radius(5px)  // 可访问

components/
├── _variables.styl
├── _mixins.styl
├── _functions.styl
│
├── button/
│   ├── _button.styl
│   ├── _button-group.styl
│   └── _index.styl
│
├── form/
│   ├── _input.styl
│   ├── _select.styl
│   ├── _checkbox.styl
│   └── _index.styl
│
├── card/
│   ├── _card.styl
│   └── _index.styl
│
└── index.styl          # 组件库入口

// components/index.styl
@require 'variables'
@require 'mixins'
@require 'functions'

@require 'button'
@require 'form'
@require 'card'

themes/
├── _variables-light.styl
├── _variables-dark.styl
├── _common.styl
└── index.styl

// themes/index.styl
theme = 'light'  // 可配置

// 导入对应主题变量
if theme == 'light'
  @require 'variables-light'
else if theme == 'dark'
  @require 'variables-dark'

// 导入通用主题样式
@require 'common'

// _breakpoints.styl
breakpoints = {
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
}

// 响应式混入
media-up(breakpoint)
  @media (min-width: breakpoint)
    {block}

media-down(breakpoint)
  @media (max-width: breakpoint - 1)
    {block}

media-between(min, max)
  @media (min-width: min) and (max-width: max - 1)
    {block}

// _utilities.styl

// 间距
generate-spacing()
  for i in 0..6
    .m-{i}
      margin i * 4px
    .p-{i}
      padding i * 4px

// 文字
.text-center
  text-align center

.text-left
  text-align left

.text-right
  text-align right

// 显示
.d-none
  display none

.d-block
  display block

.d-flex
  display flex

// Flex 工具
.justify-center
  justify-content center

.items-center
  align-items center

// 推荐：避免重复导入
@require 'variables'
@require 'mixins'

// 不推荐：可能重复
@import 'variables'
@import 'variables'

// 推荐：按功能分割
@require 'variables'
@require 'mixins/buttons'
@require 'mixins/forms'

// 不推荐：单个大文件
@require 'everything'  // 包含所有内容

// 只在需要时导入
if $include-icons
  @require 'icons'

if $include-charts
  @require 'charts'

// 1. 变量和配置
@require 'variables'
@require 'config'

// 2. 混入和函数
@require 'mixins'
@require 'functions'

// 3. 基础样式
@require 'reset'
@require 'typography'

// 4. 布局
@require 'layout/*'

// 5. 组件
@require 'components/*'

// 6. 页面
@require 'pages/*'

// 7. 工具类
@require 'utilities'

// 推荐：使用索引文件统一导出
@require 'abstracts'
@require 'components'

// 不推荐：逐个导入
@require 'abstracts/variables'
@require 'abstracts/mixins'
@require 'abstracts/functions'

// 不推荐：循环依赖
// a.styl
@require 'b'

// b.styl
@require 'a'  // 循环！

// 推荐：将共享内容提取到单独文件
// _shared.styl
shared-var = #333

// a.styl
@require 'shared'

// b.styl
@require 'shared'