Stylus 转 SCSS 是将 Stylus 代码转换为 SCSS 代码的过程。Stylus 和 SCSS 都是 CSS 预处理器，它们提供了类似的功能，如变量、混合宏（mixins）、嵌套、继承等，但它们的语法和语法规则略有不同。虽然没有直接的工具可以自动将 Stylus 转换为 SCSS，但你可以手动将 Stylus 的代码转换为 SCSS 格式。
Stylus 和 SCSS 的主要差异
语法差异：
Stylus：语法非常灵活，可以省略花括号、分号等。
SCSS：语法严格遵循 CSS 语法，必须使用花括号 {} 和分号 ;。
变量：
Stylus 使用 $ 符号声明变量。
SCSS 也使用 $ 符号声明变量。
混合宏：
Stylus 使用 () 来定义混合宏，参数通过逗号分隔。
SCSS 使用 @mixin 来定义混合宏，参数通过逗号分隔。
继承：
Stylus 使用 extends 关键字。
SCSS 使用 @extend 来继承样式。
嵌套：
两者都支持嵌套，但 SCSS 需要严格使用花括号和分号。
示例：Stylus 转 SCSS
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. 转换为 SCSS
scss
// styles.scss
$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 中的变量 $primary-color 和 $font-size 在 SCSS 中也是使用 $ 符号，但 SCSS 语法要求每个变量声明后都需要加分号。
嵌套：
Stylus 的嵌套结构与 SCSS 非常相似，但 SCSS 需要严格使用花括号 {} 和分号 ; 来包裹每个规则。
混合宏（Mixins）：
在 Stylus 中，混合宏的定义语法是直接用括号 ()，而在 SCSS 中使用 @mixin 和 @include 来实现相同的功能。
继承（@extend）：
在 Stylus 中，继承使用 extends，而在 SCSS 中使用 @extend 关键字。继承的结构和效果类似，但 SCSS 需要加上 @extend。
示例：混合宏转换
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
SCSS：混合宏
scss
// SCSS
@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 转 SCSS 的其他示例
1. Stylus：继承
stylus
// Stylus
.btn
padding: 10px 15px
border-radius: 5px
.primary-btn
extends .btn
background-color: #007bff
color: white
转换为 SCSS：
scss
// SCSS
.btn {
padding: 10px 15px;
border-radius: 5px;
}
.primary-btn {
@extend .btn;
background-color: #007bff;
color: white;
}
2. Stylus：运算
stylus
// Stylus
width = 100px
padding = 10px
.container
width: width + padding
转换为 SCSS：
scss
// SCSS
$width: 100px;
$padding: 10px;
.container {
width: $width + $padding;
}
总结：如何将 Stylus 转换为 SCSS
变量：Stylus 和 SCSS 都使用 $ 来定义变量，语法几乎相同，只需要在 SCSS 中加上分号。
嵌套：两者都支持嵌套，但 SCSS 需要使用花括号 {} 和分号 ;，而 Stylus 语法更宽松。
混合宏（Mixins）：Stylus 和 SCSS 的混合宏定义方式略有不同，Stylus 使用 () 直接定义，而 SCSS 使用 @mixin 来定义混合宏，并通过 @include 调用。
继承：Stylus 使用 extends 来继承，而 SCSS 使用 @extend 关键字来实现相同的效果。
运算：Stylus 和 SCSS 都支持运算，语法几乎一致，Stylus 使用直接的变量名，而 SCSS 需要在变量名之前加上 $ 符号。