Post by account_disabled on Jan 29, 2024 3:27:16 GMT -6
关于从普通 CSS 切换到 CSS 预处理器的文章已经有很多，并且有充分的理由——预处理器增加了我们无法单独在浏览器中获得的功能和控制。从赞扬预处理器优点的文章到更技术性的读物，如 Etsy 详细的“大规模过渡到 SCSS ”，我觉得我已经把它们全部读完了。 在Sprout Social，我们做了一件几乎没有被提及的事情——从一种预处理器切换到另一种预处理器。早期，Sprout 采用了Less；我们去年年底决定改用 SCSS，即Sass的类似 CSS 的语法。我们花了很多时间来确保过渡顺利，这次经历凸显了 Less 和 Sass 之间的一些深刻差异。 为什么？ 在我们了解我们所学到的知识之前，你的第一个问题（一个合理的问题）应该是：“为什么要麻烦呢？”我们已经从变量和 mixin、@imports 和颜色函数中受益。当然，Sass 有许多 Less 缺乏的功能，例如映射和函数，但我们到目前为止却没有它们。 转换的两个主要原因很突出： 社区： 在 github 中搜索 lib 扩展名：scss，然后搜索 lib 扩展名：less。
截至撰写本文时，结果很明确：120,234 个 SCSS 文件，29,449 个 Less 文件。 Switching 提供了 WhatsApp 数据 获得更广泛的好想法和更大的开源池的机会。即使是流行的 Bootstrap 库（Less 仍然可行的原因之一）也宣布将转向 SCSS。 速度： Libsass太棒了。我们的样式的构建时间缩短了 500% 以上。虽然 Libsass 尚未赶上 Sass 规范的最新版本，但我们并不认为我们错过了任何东西。 如何？ 我们编译的 CSS 有近 19,000 个选择器。切换后，编译后的 CSS 需要几乎相同；我们必须确保我们的客户看不到这种转变。目前正在进行的功能又如何呢？我们最近的撰写更新更改了 3,837 行样式 - 该团队如何安全地中途切换？ 我们考虑了三种选择： 首先将所有内容编译为 CSS。 这是确保我们的用户 100% 准确地获得相同款式并真正在一天内完成转换的唯一方法。彻底打破的想法总是很诱人，但新代码并不总是更好的代码。即使使用 sass-convert和css2compass等工具，我们花费在重建上的时间也远远超过任何其他选项。
仅在 SCSS 中编写新样式。我们考虑过划清界限——少则陈旧、失败；少则意味着过时。 Sass 是新热点。最终，我们拒绝了这个想法。立即切换会带来很多好处，而且没有人愿意在两组 mixins 和变量之间保持奇偶性。 将我们所有的 Less 文件转换为 SCSS 并修复损坏的部分。面对要么丢弃历史记录，要么添加另一个构建任务来维护，我们开始转换一切。 清洁屋 SCSS 与 Less 没有什么不同，不是吗？ “ Converting from Less to Sass ”分享了一系列正则表达式搜索，以更改最明显的语法差异，例如 .()。这些正则表达式搜索汇总在 less2sass中，我们运行了所有文件。 不过，如果真这么容易的话，博客就没什么可写的了。对 less2sass 脚本的一些挥之不去的拉取请求强调了它的一些疏忽，例如字符串插值差异。更具挑战性的是我们在转换后遇到的构建错误，这些错误突出了比简单正则表达式无法解决的更大的差异。坦白说，我们也发现了一些不好的 CSS。 我们记录了这些构建错误并列出了需要修复的内容，并且我们知道我们可以在转换样式之前修复大部分错误。我们决定在转换之前清理 Less 文件。 修复混合 我们从 Less 和 Sass 处理条件的方式之间的差异开始。
截至撰写本文时，结果很明确：120,234 个 SCSS 文件，29,449 个 Less 文件。 Switching 提供了 WhatsApp 数据 获得更广泛的好想法和更大的开源池的机会。即使是流行的 Bootstrap 库（Less 仍然可行的原因之一）也宣布将转向 SCSS。 速度： Libsass太棒了。我们的样式的构建时间缩短了 500% 以上。虽然 Libsass 尚未赶上 Sass 规范的最新版本，但我们并不认为我们错过了任何东西。 如何？ 我们编译的 CSS 有近 19,000 个选择器。切换后，编译后的 CSS 需要几乎相同；我们必须确保我们的客户看不到这种转变。目前正在进行的功能又如何呢？我们最近的撰写更新更改了 3,837 行样式 - 该团队如何安全地中途切换？ 我们考虑了三种选择： 首先将所有内容编译为 CSS。 这是确保我们的用户 100% 准确地获得相同款式并真正在一天内完成转换的唯一方法。彻底打破的想法总是很诱人，但新代码并不总是更好的代码。即使使用 sass-convert和css2compass等工具，我们花费在重建上的时间也远远超过任何其他选项。
仅在 SCSS 中编写新样式。我们考虑过划清界限——少则陈旧、失败；少则意味着过时。 Sass 是新热点。最终，我们拒绝了这个想法。立即切换会带来很多好处，而且没有人愿意在两组 mixins 和变量之间保持奇偶性。 将我们所有的 Less 文件转换为 SCSS 并修复损坏的部分。面对要么丢弃历史记录，要么添加另一个构建任务来维护，我们开始转换一切。 清洁屋 SCSS 与 Less 没有什么不同，不是吗？ “ Converting from Less to Sass ”分享了一系列正则表达式搜索，以更改最明显的语法差异，例如 .()。这些正则表达式搜索汇总在 less2sass中，我们运行了所有文件。 不过，如果真这么容易的话，博客就没什么可写的了。对 less2sass 脚本的一些挥之不去的拉取请求强调了它的一些疏忽，例如字符串插值差异。更具挑战性的是我们在转换后遇到的构建错误，这些错误突出了比简单正则表达式无法解决的更大的差异。坦白说，我们也发现了一些不好的 CSS。 我们记录了这些构建错误并列出了需要修复的内容，并且我们知道我们可以在转换样式之前修复大部分错误。我们决定在转换之前清理 Less 文件。 修复混合 我们从 Less 和 Sass 处理条件的方式之间的差异开始。