CSS到SASS（或LESS）的转换[关闭]

Posted 2023-03-06

【中文标题】CSS到SASS（或LESS）的转换[关闭]

【英文标题】：CSS to SASS (or LESS) conversion [closed]

【发布时间】：2012-11-07 04:06:58

【问题描述】：

谁能推荐一些 CSS to less 或 CSS to sass 转换工具？我找到了一些。 http://css2less.cc/ 和 http://css2sass.herokuapp.com/ 但任何对其可靠性（或其他工具的建议）的深入了解将不胜感激。我有一个用于白标解决方案的大型 CSS 代码库，这将极大地受益于 CSS 预处理器，但手动转换为 sass/less 将是一项艰巨的任务。

提前致谢

编辑：我应该强调我对使用工具（例如上面列出的工具（没有更好的工具））将大型 CSS 代码库转换为使用 CSS 预处理器（例如 SASS）的体验特别感兴趣或更少。或者是否有任何其他方式（除了列出的工具）来实现这一壮举是务实的。你必须克服哪些障碍？它甚至值得尝试吗？还是这样的元语言只适合您可以从头开始的新项目？

【问题讨论】：

[是的，我知道这已经两岁了，但是...] 这应该在softwarerecs.stackexchange.com 上询问

我发现这个很方便sebastianpontow.de/css2compass

链接已更改css2sass.herokuapp.com

【参考方案1】：

我在http://css2sass.heroku.com/ 上获得了很好的体验。你也可以在 github 上找到他们的代码库。您还可以通过原始 sass gem 安装的 sass-convert 工具直接转换文件。基本上这就是 css2sass 正在做的事情。

只要打电话：

sass-convert -F css -T sass original_file.css converted_file.sass

【参考方案2】：

SASS 的好处是您不需要将 CSS 转换为 SASS，因为 SASS 是 CSS 的扩展。

只需复制和粘贴即可。

但是，如果您希望将 CSS 重构为结构良好的 SASS 文件，那是我认为工具无法做到的。

【讨论】：

我可以向您推荐 this tool 纯粹用于视觉格式，尽管它对结构没有多大作用。

看起来有一个名为 sass-convert 的 sass gem 附带的可执行文件与我的问题中提到的其他工具或多或少相同。除了嵌套公共前缀之外，您似乎是正确的，因为没有一种工具可以将 css 重构为结构良好的 SASS（因此将您的答案标记为正确）。在那之后，诸如冗余颜色、宽度、填充等变量等低垂的成果是一个很好的起点。然后，当我确定所有这些后，我可以添加一些 Mixins！干杯

那个....实际上是错误的。 sass 文件中的 css 代码会导致语法错误。是的，op 问题中的两个链接都可以将 css 重组为正确结构的 sass 代码。

正如@FélixGagnon-Grenier 所说，CSS 与 SASS 语法不兼容，但请注意它与 SCSS 语法兼容，自 SASS 3 IIRC 起可用

【参考方案3】：

这篇文章需要列出以下 2 个在线工具供任何未来的查看者使用。

首先，我总是通过这个在线工具运行 css 以将其转换为更简洁的 css http://shrthnd.volume7.io/ - 真的不需要解释，如果你还没有习惯这样写你的 CSS，就让它变得更干净更小。

然后，通过这个在线工具http://sebastianpontow.de/css2compass/ - 这是一个非常好的从你的 css 创建 scss 文件的工具。它将所有颜色转换为您喜欢的格式，设置颜色变量和字体变量，并通过查看 sass 对您的 css 所做的整体让您对 sass 的基础知识有一个很好的了解。

我注意到第二个工具中唯一不太理想的是它命名字体系列，例如$font_0: Open Sans; $font_1: Roboto Condensed; $font_2: arial; 等等。我总是发现以实际字体的简短形式命名它们更直观，或者设置与内容相关的 3-5 个名称，例如 $font_main, $font_sub, $font_callout, $font_titles 或您喜欢的任何名称。但是，当您将其全部粘贴回全新的 scss 文件时，这是一个 30 秒的修复：)

【参考方案4】：

有点晚了，最近发现了这个在线转换工具：

http://css2sass.heroku.com/

虽然它有时会拒绝有效的 css，但它帮助了我

【参考方案5】：

我现在确实找到了一些东西：Leafo

它做了一个基本的格式化，例如：

#header 
/* ... */


#header p 
/* ... */

to

#header 
/* ... */
p 
/* ... */

希望对你有帮助！

如果你想验证或任何查看 sass 到 css 的东西，你可以尝试 sass 在线网站... Try Sass Online

【讨论】：

谢谢维奈。你用过减法吗？我很想听听你的经历。例如，编译后的 css 与原始 css 的比较（在功能方面）；尤其是在大型 CSS 代码库的上下文中

谢谢维奈。 Lessify 不是 CSS 预处理器。这是您在答案中发布的原始链接（关于执行 css 到 SASS 转换的工具）。您似乎在编辑中指的是 SASS。我已经了解 SASS 的优势。我对人们在遗留 CSS 代码库中使用工具将当前 CSS 转换为元语言（如 SASS）的体验感兴趣。