Sass转Stylus
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...)，即使它是被放在引号内作为字符串值来对象，也会被该正则匹配到，对此这种情况应慎重，所以不建议执行替换所有的操作；
- 注意：该正则会匹配到所有的写在一行内的 Map 格式
- 替换成为：
{$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}
