编辑“︁CSS Stylus基础”︁

= CSS Stylus基础 =

'''Stylus''' 是一种流行的 [[CSS预处理器]]，它通过引入变量、嵌套规则、混合（Mixins）、函数等高级特性，扩展了原生CSS的功能。Stylus语法灵活，支持省略花括号和分号，使代码更简洁易读。本教程将介绍Stylus的基础语法、核心功能及实际应用场景，适合初学者和需要快速掌握Stylus的程序员。

== 简介 ==
Stylus由Node.js编写，与[[Sass]]和[[Less]]类似，但语法更加自由。它允许开发者以更高效的方式编写CSS，并通过编译生成标准的CSS文件。Stylus的主要特点包括：
* **变量**：存储可复用的值（如颜色、尺寸）。
* **嵌套**：简化选择器的层级结构。
* **混合（Mixins）**：定义可重用的代码块。
* **函数**：支持逻辑运算和动态样式生成。

== 安装与使用 ==
=== 安装 ===
通过npm安装Stylus：
<syntaxhighlight lang="bash">
npm install stylus -g
</syntaxhighlight>

=== 编译Stylus文件 ===
将<code>.styl</code>文件编译为CSS：
<syntaxhighlight lang="bash">
stylus input.styl -o output.css
</syntaxhighlight>

== 基础语法 ==
=== 变量 ===
变量用于存储值，通过<code>=</code>或<code>:</code>赋值：
<syntaxhighlight lang="stylus">
primary-color = #3498db
body
  background: primary-color
</syntaxhighlight>
编译后：
<syntaxhighlight lang="css">
body {
  background: #3498db;
}
</syntaxhighlight>

=== 嵌套 ===
嵌套规则简化了层级选择器的书写：
<syntaxhighlight lang="stylus">
nav
  ul
    margin: 0
    li
      display: inline-block
</syntaxhighlight>
编译后：
<syntaxhighlight lang="css">
nav ul {
  margin: 0;
}
nav ul li {
  display: inline-block;
}
</syntaxhighlight>

=== 混合（Mixins） ===
Mixins是可复用的代码块，类似函数：
<syntaxhighlight lang="stylus">
border-radius(n)
  -webkit-border-radius: n
  -moz-border-radius: n
  border-radius: n

button
  border-radius(5px)
</syntaxhighlight>
编译后：
<syntaxhighlight lang="css">
button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
</syntaxhighlight>

=== 函数 ===
Stylus支持自定义函数：
<syntaxhighlight lang="stylus">
add(a, b)
  a + b

width = add(10px, 5px)
</syntaxhighlight>
编译后：
<syntaxhighlight lang="css">
width: 15px;
</syntaxhighlight>

== 实际案例 ==
=== 响应式布局 ===
使用Stylus变量和混合实现响应式设计：
<syntaxhighlight lang="stylus">
breakpoint = 768px

responsive-mixin()
  @media (min-width: breakpoint)
    {block}

.container
  width: 100%
  +responsive-mixin()
    width: 750px
</syntaxhighlight>
编译后：
<syntaxhighlight lang="css">
.container {
  width: 100%;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
</syntaxhighlight>

=== 主题切换 ===
通过变量快速切换主题颜色：
<syntaxhighlight lang="stylus">
theme = {
  primary: #3498db,
  secondary: #2ecc71
}

.button
  background: theme.primary
  color: white
</syntaxhighlight>

== 进阶特性 ==
=== 条件语句 ===
使用<code>if</code>和<code>else</code>实现逻辑控制：
<syntaxhighlight lang="stylus">
dark-mode = true

body
  if dark-mode
    background: #333
    color: white
  else
    background: white
    color: #333
</syntaxhighlight>

=== 循环 ===
遍历生成样式：
<syntaxhighlight lang="stylus">
for i in 1..3
  .col-{i}
    width: (100% / i)
</syntaxhighlight>
编译后：
<syntaxhighlight lang="css">
.col-1 {
  width: 100%;
}
.col-2 {
  width: 50%;
}
.col-3 {
  width: 33.333333333333336%;
}
</syntaxhighlight>

== 总结 ==
Stylus通过简洁的语法和强大的功能，显著提升了CSS的开发效率。掌握变量、嵌套、混合和函数等特性后，开发者可以更灵活地编写可维护的样式代码。结合实际案例（如响应式设计和主题切换），Stylus能适应复杂的项目需求。

<mermaid>
graph TD
  A[Stylus基础] --> B[变量]
  A --> C[嵌套]
  A --> D[混合]
  A --> E[函数]
  B --> F[存储颜色/尺寸]
  C --> G[简化层级]
  D --> H[复用代码块]
  E --> I[动态计算]
</mermaid>

下一步建议学习[[CSS预处理器的高级特性]]或[[Stylus与构建工具集成]]。

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS预处理器]]