Stylus 转 SASS 是将 Stylus 代码转换为 SASS 代码的过程。Stylus 和 SASS 都是 CSS 预处理器，它们提供了类似的功能，如变量、混合宏（mixins）、嵌套、继承等，但它们的语法和规则有所不同。尽管没有直接的工具可以自动将 Stylus 转换为 SASS，了解两者的差异并进行手动转换是一个有效的方案。
Stylus 和 SASS 的主要差异
语法差异：
Stylus：非常灵活，允许省略分号、花括号等语法元素。
SASS：严格要求使用缩进和空格来表示块结构，SASS（缩进版）不使用花括号和分号，而 SCSS（CSS 语法扩展）则使用花括号和分号，基本语法接近 CSS。
变量：
Stylus 使用 $ 符号来声明变量。
SASS 也使用 $ 符号来声明变量，语法和 Stylus 类似。
混合宏（Mixins）：
Stylus 使用 () 来定义混合宏，参数通过逗号分隔。
SASS 使用 @mixin 来定义混合宏，参数使用逗号分隔。
继承：
Stylus 使用 extends 来继承样式。
SASS 使用 @extend 来继承样式。
嵌套：
两者都支持嵌套，但 SASS 需要严格按照缩进和空格来表示结构，而 Stylus 对此比较宽松。
示例：Stylus 转 SASS
1. Stylus 示例
stylus
// styles.styl
$primary-color = #3498db
$font-size = 16px
body
background-color: #f0f0f0
font-family: Arial, sans-serif
color: $primary-color
font-size: $font-size
h1
color: $primary-color
font-size: 2em
.container
width: 100%
.header
background-color: #333
color: white
2. 转换为 SASS
sass
// styles.sass
$primary-color: #3498db
$font-size: 16px
body
background-color: #f0f0f0
font-family: Arial, sans-serif
color: $primary-color
font-size: $font-size
h1
color: $primary-color
font-size: 2em
.container
width: 100%
.header
background-color: #333
color: white
转换步骤解析
变量：
Stylus 和 SASS 都使用 $ 符号来声明变量，SASS 和 Stylus 的变量语法是一样的，只是在 SASS 中必须使用分号（;）结束声明。
嵌套：
在 Stylus 中，嵌套是很自然的，无需花括号或分号，但在 SASS 中，嵌套的结构使用缩进代替花括号 {}。SASS 使用缩进表示父子关系，并且不使用分号 ; 作为结束标志。
混合宏（Mixins）：
Stylus 中定义混合宏的方法是通过 () 来接受参数，而在 SASS 中使用 @mixin 来定义混合宏并用 @include 来调用它。需要注意的是，SASS 使用 @mixin 和 @include 语法，Stylus 使用更简洁的括号语法。
示例：混合宏转换
Stylus：混合宏
stylus
// Stylus
border-radius(radius)
-webkit-border-radius: radius
-moz-border-radius: radius
border-radius: radius
.button
border-radius(5px)
background-color: #3498db
color: white
SASS：混合宏
sass
// SASS
@mixin border-radius($radius)
-webkit-border-radius: $radius
-moz-border-radius: $radius
border-radius: $radius
.button
@include border-radius(5px)
background-color: #3498db
color: white
示例：继承
Stylus：继承
stylus
// Stylus
.btn
padding: 10px 15px
border-radius: 5px
.primary-btn
extends .btn
background-color: #007bff
color: white
SASS：继承
sass
// SASS
.btn
padding: 10px 15px
border-radius: 5px
.primary-btn
@extend .btn
background-color: #007bff
color: white
示例：运算
Stylus：运算
stylus
// Stylus
width = 100px
padding = 10px
.container
width: width + padding
SASS：运算
sass
// SASS
$width: 100px
$padding: 10px
.container
width: $width + $padding
总结：如何将 Stylus 转换为 SASS
变量：在 Stylus 和 SASS 中，变量的定义语法是相同的，使用 $ 符号，但 SASS 需要加上分号（;）结束每个变量声明。
嵌套：Stylus 的嵌套规则较为灵活，而 SASS 使用严格的缩进规则，且不使用花括号 {}。所有嵌套规则应该通过适当的缩进来替代花括号和分号。
混合宏（Mixins）：Stylus 使用 () 定义混合宏，而 SASS 使用 @mixin 来定义，并使用 @include 来调用混合宏。
继承：Stylus 使用 extends，SASS 使用 @extend 来实现继承。
运算：Stylus 和 SASS 都支持运算，语法基本相同，SASS 变量以 $ 符号开始，运算时需要加上 $ 符号。