• 1. 需求
• 2. 场景
• 3. 解决方案
• 4. 搜索正则和替换内容
  • 4.1. 设置变量的默认值
  • 4.2. 变量赋值
  • 4.3. 插值语句
  • 4.4. 行内Map
  • 4.5. 跨行Map

1. 需求

将 Sass 的变量配置文件 转成 Stylus 的变量配置文件

2. 场景

从特性和语法上，个人认为 Stylus 优于 Sass ，Sass 优于 Less ，所以项目造型上，我选择了 Stylus ，然而项目又用到了 Element-UI ， Element-UI 的主题变量是用 Sass 写的，为了在 Stylus 中能访问到 Element-UI 的主题变量，需要将 Element-UI 用 Sass 写的主题变量 转换成 Stylus 语法；

3. 解决方案

曾经找到过一个将Sass转成Stylus的在线工具http://sass2stylus.com，但该工具实现太简单，只是将 Sass 的 : 换成 =，并去除了 !default 标识，而简单的去除 !default 标识是不对了，应该转成 Stylus 给变量设置默认值的语法，即使这样，也远远不能满足我的需求；

为了更加彻底的转换，我写了一系列的正则，争取尽可能地转换更多的内容；

本文提供了一些 搜索正则 和 替换结果，你可以在支持正则搜索与替换的编辑器（如：VSCode、Webstorm等等）里进行搜索与替换；

将来会开发一个转换工具，争取彻底实现将 Sass 和 Stylus 互转；

4. 搜索正则和替换内容

4.1. 设置变量的默认值

描述
将 Sass 的设置变量默认值的方式 换成 Stylus 设置变量默认值的方式；

行为
将 Sass 中定义默认值 !default 去除，并将 Sass 的变量赋值符号 : 替换成 Stylus 条件赋值符 ?=；

操作

• 搜索正则：(?<=\$[-_\w]+)\s*:\s*(.+)!default
• 替换成为：?= $1

4.2. 变量赋值

描述
将Sass给变量赋值的方式 换成 Stylus 给变量赋值的方式；

行为
将Sass的变量赋值符 : 替换成 Stylus 的变量赋值符 = ；

操作

• 搜索正则：(?<=\$[-_\w]+)\s*:\s*(?!.+!default)
• 替换成为：=

4.3. 插值语句

描述
将Sass的插值语法 换成 Stylus 的插值语法；

行为
将 Sass 的插值语法 #{[表达式]} 替换成 Stylus 的插值语法 {[表达式]}；

操作

• 搜索正则：(?<=^.*\s+)#\{([^{}]+)\}(?=\s+)
• 替换成为：($1)

4.4. 行内Map

描述
将 Sass 写在一行内的 Map 字面量语法 换成 Stylus 的 哈希 Hashes 字面量语法；

行为
将 Sass 写在一行内的 Map 字面量语法 (key:value,key:value...) 换成 Stylus 的 哈希 Hashes 字面量语法 {key:value,key:value...}；

操作

• 搜索正则：\((\s*(.+:.+)(,.+:.+)*)\)
  • 注意：该正则会匹配到所有的写在一行内的 Map 格式 (key:value,key:value...)，即使它是被放在引号内作为字符串值来对象，也会被该正则匹配到，对此这种情况应慎重，所以不建议执行替换所有的操作；
• 替换成为：{$1}

4.5. 跨行Map

描述
将 Sass 跨多行的 Map 字面量语法 换成 Stylus 的 哈希 Hashes 字面量语法；

行为
将 Sass 跨多行的 Map 字面量语法，如：

(
    key:value,
    key:value,
    ...
)

换成 Stylus 的 哈希 Hashes 字面量语法，如：

{
    key:value,
    key:value,
    ...
}

操作

• 搜索正则：\((\s*\n*(.+:.+)(,\s*\n*.+:.+)+\n*)\)
  • 注意：该正则会匹配到所有的Map 格式，即使它是被放在引号内作为字符串值来对象，也会被该正则匹配到，对此这种情况应慎重，所以不建议执行替换所有的操作；
• 替换成为：{$1}