CSS转换为SASS（或LESS）

Question

有人可以推荐一些将CSS转换为LESS或SASS的工具吗？我已经找到了一些，例如http://css2less.cc/和http://css2sass.herokuapp.com/，但如何评估它们的可靠性（或其他工具的建议）仍需要了解。我们有一个大型的CSS代码库用于白标解决方案，采用CSS预处理器会极大地受益，但手动转换为SASS / LESS是一项巨大的任务。

提前感谢！

编辑：我应该强调我特别关注使用工具（如上述工具（在没有更好的工具的情况下））将大型CSS代码库转换为使用CSS预处理器（例如SASS或LESS）的经验。除了列出的工具之外，是否存在实现此类事情的其他方法？你必须克服什么障碍？这样做值得尝试吗？或者这样的元语言只适用于新项目，你可以从头开始？

- rbginge

---

[是的，我意识到这已经两年了，但是...] 应该在http://softwarerecs.stackexchange.com/上提出此问题。 - rlemon

我发现这个很方便 http://sebastianpontow.de/css2compass/ - Muntasim

链接已更改：http://css2sass.herokuapp.com/ - Zack Zilic

Answer 1

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

只需调用：

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

- bjunix

Answer 2

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

只需复制并粘贴即可开始使用。

如果您想要将CSS重构为结构良好的SASS文件，那么我认为没有工具可以做到这一点。

- Clark Pan

---

我可以向您推荐这个工具，纯粹是为了视觉格式化，尽管它对结构没有太多帮助。 - Clark Pan

看起来 sass gem 自带一个可执行文件 sass-convert，它做的事情与我问题中提到的其他工具差不多。除了嵌套常见前缀之外，似乎没有工具可以将 CSS 重构为良好结构的 SASS（所以我将你的答案标记为正确）。在此之后，可以从一些低 hanging 的水果开始入手，比如对于冗余颜色、宽度、填充等使用变量。然后当这些都确定下来后，就可以添加一些 Mixins！干杯 - rbginge

那个……其实是错误的。在Sass文件中放置CSS代码会导致语法错误。而且，是的，OP问题中的两个链接都可以将CSS重构为正确结构的Sass代码。 - Félix Adriyel Gagnon-Grenier

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

Answer 3

此帖子需要列出以下两个在线工具以供未来的读者使用。

首先，我总是会通过这个在线工具运行css代码，将其转换为更干净、更简洁的缩写css代码：http://shrthnd.volume7.io/ - 不需要解释，如果您还没有习惯用这种方式编写css代码，它只需使所有代码变得更加清晰、更小。

然后，通过这个在线工具 http://sebastianpontow.de/css2compass/ - 这是一个非常好的工具，可以从您的css代码中创建scss文件。它将把所有颜色转换为您喜欢的格式，设置颜色变量和字体变量，并通过查看它对您的css代码做了哪些处理，为您提供sass的基础知识。

我注意到第二个工具中不太理想的一点是，它将字体系列命名为 $font_0: Open Sans; $font_1: Roboto Condensed; $font_2: arial;等等。我总是发现用实际字体的简短形式或设置3-5个与内容相关的名称（如$font_main, $font_sub, $font_callout, $font_titles或您喜欢的任何其他名称）来命名它们更为直观。但这只需要30秒，当您将所有代码粘贴回全新的scss文件中。

- Benbodhi

Answer 4

虽然有点晚，但我最近发现了这个在线转换工具:

http://css2sass.heroku.com/

它帮助了我，尽管有时会拒绝有效的css。

- Bart Burg

Answer 5

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

它可以进行基本的格式化，例如：

#header {
/* ... */
}

#header p {
/* ... */
}
to

#header {
/* ... */
p {
/* ... */
}
}

希望能有所帮助！

如果你想验证或查看Sass转换为CSS的结果，可以尝试使用在线的Sass网站... 试试Sass在线转换

- Sri

---

谢谢Vinay。你用过lessify吗？我很想听听你的使用经验。例如，编译后的CSS与原始CSS（在功能方面）相比如何；特别是在大型CSS代码库的情况下。 - rbginge

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