CSS 转 Stylus 是将标准的 CSS 代码转换为 Stylus（一个 CSS 预处理器）的过程。Stylus 提供了一些非常强大的功能，使得 CSS 代码更加灵活和易于管理，比如变量、函数、混合宏（mixins）、继承等。与 SASS 或 LESS 相似，Stylus 也是一个 CSS 预处理器，但它的语法非常灵活，支持可选的分号和花括号。
1. CSS 转 Stylus 基本示例
假设你有以下的 CSS 代码：
css
/* 原始 CSS */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
font-size: 2em;
}
p {
color: #666;
line-height: 1.5;
}
将其转换为 Stylus 语法后：
stylus
/* 转换为 Stylus */
bg-color = #f0f0f0
font-family = Arial, sans-serif
main-color = #333
secondary-color = #666
body
background-color: bg-color
font-family: font-family
h1
color: main-color
font-size: 2em
p
color: secondary-color
line-height: 1.5
2. Stylus 的基本特性
变量
Stylus 支持变量，用来存储颜色、字体、尺寸等常用的值。它可以使样式表更加灵活和易于修改。
stylus
bg-color = #f0f0f0
font-family = Arial, sans-serif
body
background-color: bg-color
font-family: font-family
混合宏（Mixins）
Stylus 允许你使用混合宏来封装样式块，然后通过调用这些混合宏来复用样式。混合宏还可以接受参数来改变样式的细节。
stylus
button(bg-color, text-color)
background-color: bg-color
color: text-color
padding: 10px 15px
border-radius: 5px
.primary-btn
button(#007bff, white)
.secondary-btn
button(#6c757d, white)
转换为 CSS 后：
css
.primary-btn {
background-color: #007bff;
color: white;
padding: 10px 15px;
border-radius: 5px;
}
.secondary-btn {
background-color: #6c757d;
color: white;
padding: 10px 15px;
border-radius: 5px;
}
嵌套
Stylus 支持嵌套样式，允许你在父规则内嵌套子规则，从而更清晰地表达层级关系。
stylus
.container
width: 100%
.header
background-color: #f0f0f0
color: #333
转换为 CSS 后：
css
.container {
width: 100%;
}
.container .header {
background-color: #f0f0f0;
color: #333;
}
继承（Extend）
Stylus 支持继承功能，可以让一个规则继承另一个规则的样式，减少重复代码。
stylus
btn
padding: 10px 15px
border-radius: 5px
.primary-btn
extends btn
background-color: #007bff
color: white
.secondary-btn
extends btn
background-color: #6c757d
color: white
转换为 CSS 后：
css
.primary-btn, .secondary-btn {
padding: 10px 15px;
border-radius: 5px;
}
.primary-btn {
background-color: #007bff;
color: white;
}
.secondary-btn {
background-color: #6c757d;
color: white;
}
函数
Stylus 允许你定义自定义函数，这可以大大增强样式的动态性和复用性。你可以创建自己的计算公式、颜色操作等。
stylus
darken(color, amount)
return color + amount
button(bg-color, text-color)
background-color: darken(bg-color, 20px)
color: text-color
.primary-btn
button(#007bff, white)
3. 如何将 CSS 转换为 Stylus
手动转换
你可以通过以下步骤手动将传统的 CSS 代码转换为 Stylus：
提取变量：将 CSS 中常用的颜色、字体、尺寸等提取为 Stylus 变量。这样样式表可以更加灵活和可维护。
stylus
bg-color = #f0f0f0
font-family = Arial, sans-serif
使用混合宏（Mixins）：对于可复用的样式块，将其封装成混合宏，允许你复用相同的样式。
stylus
button(bg-color, text-color)
background-color: bg-color
color: text-color
padding: 10px 15px
border-radius: 5px
使用嵌套：Stylus 支持层级样式的嵌套。你可以将 CSS 规则嵌套在父规则中，以表达层级结构。
stylus
.container
width: 100%
.header
background-color: #f0f0f0
color: #333
删除冗余的选择器和属性：Stylus 提供继承和更简洁的语法，使得样式更加简洁。