CSS 到 SASS（或 LESS）的转换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13450355/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS to SASS (or LESS) conversion
提问by rbginge
Can anyone recommend some CSS to less, or CSS to sass conversion tools? I have found a few .e.g. http://css2less.cc/and http://css2sass.herokuapp.com/but any insight into their reliability (or recommendations of other tools) would be greatly appreciated. I have a large CSS code base for a white label solution which would benefit greatly from having a CSS preprocessor in place but it would be a huge task to manually convert to sass/less.
任何人都可以向less推荐一些CSS，或者向sass转换工具推荐一些CSS吗？我发现了一些 .eg http://css2less.cc/和http://css2sass.herokuapp.com/，但对它们的可靠性（或其他工具的建议）的任何见解将不胜感激。我有一个用于白标签解决方案的大型 CSS 代码库，它可以从适当的 CSS 预处理器中受益匪浅，但手动转换为 sass/less 将是一项艰巨的任务。
Thanks in advance
提前致谢
EDIT: I should emphasize I'm particularly interested in experiences of using a tool (such as those listed above (in the absence of any better ones)) to convert a large CSS code base towards using a CSS preprocessor such as SASS or LESS. Or if any other ways (other than the tools listed) to achieve such a feat are pragmatic. What hurdles did you have to overcome? Is it even worth attempting? Or are such metalanguages only suited to a new project where you can start from scratch?
编辑：我应该强调我对使用工具（例如上面列出的那些（在没有更好的工具）的情况下）将大型 CSS 代码库转换为使用 CSS 预处理器（例如 SASS 或 LESS）的经验特别感兴趣。或者如果任何其他方式（除了列出的工具）实现这样的壮举是务实的。你必须克服哪些障碍？它甚至值得尝试吗？或者这样的元语言是否只适用于可以从头开始的新项目？
采纳答案by Clark Pan
The good thing about SASS is that you don't need to convert CSS into SASS, since SASS is an extension of CSS.
SASS 的好处是你不需要将 CSS 转换成 SASS，因为 SASS 是 CSS 的扩展。
Simply copy and paste and you're good to go.
只需复制和粘贴，您就可以开始使用了。
If you're looking to refactor your CSS into well structured SASS files though, thats something i don't think a tool can do.
如果您希望将 CSS 重构为结构良好的 SASS 文件，那么我认为这是工具无法做到的。
回答by bjunix
I made good experiences with http://css2sass.heroku.com/. You can also find their code base on github. You can also convert files directly via the sass-convert tool which will be installed by the original sass gem. Basically this is just what css2sass is doing.
我在http://css2sass.heroku.com/ 上获得了很好的体验。您还可以在 github 上找到他们的代码库。您还可以通过 sass-convert 工具直接转换文件，该工具将由原始 sass gem 安装。基本上这就是 css2sass 正在做的事情。
Just call:
只需致电：
sass-convert -F css -T sass original_file.css converted_file.sass
回答by Benbodhi
This post needs the following 2 online tools listed for any future viewers.
这篇文章需要列出以下 2 个在线工具，供以后的查看者使用。
Firstly, I would always run the css through this online tool to convert it to cleaner shorthand css http://shrthnd.volume7.io/- no explanation needed really, just makes it all cleaner and smaller if you're not in the habit of writing your css that way already.
首先，我总是会通过这个在线工具运行 css，将其转换为更简洁的速记 css http://shrthnd.volume7.io/- 真的不需要解释，如果你不习惯，只需让它更干净更小已经这样写你的css了。
Then, through this online tool http://sebastianpontow.de/css2compass/-This is a really good tool for creating scss files from your css. It will convert all colors to your preferred format, set color variables and font variables and overall give you a good idea of the basics of sass just by seeing what it did to your css.
然后，通过这个在线工具http://sebastianpontow.de/css2compass/- 这是一个非常好的工具，用于从您的 css 创建 scss 文件。它将所有颜色转换为您喜欢的格式，设置颜色变量和字体变量，并且通过查看它对您的 css 做了什么，总体上让您对 sass 的基础知识有一个很好的了解。
The only thing I have noticed as not so desirable in the second tool is that it names font families like this $font_0: Open Sans; $font_1: Roboto Condensed; $font_2: arial;and so on. I always find it more intuitive to name them in short form of the actual font, or setup 3-5 names that relate to the content such as $font_main, $font_sub, $font_callout, $font_titlesor however you prefer. But that's a 30second fix when you paste it all back into your brand new scss file :)
我注意到在第二个工具中唯一不太理想的是它命名了这样的字体系列$font_0: Open Sans; $font_1: Roboto Condensed; $font_2: arial;等等。我总是发现以实际字体的简短形式命名它们更直观，或者设置 3-5 个与内容相关的名称，例如$font_main, $font_sub, $font_callout, $font_titles或您喜欢的任何名称。但是当你把它全部粘贴回你全新的 scss 文件时，这是一个 30 秒的修复:)
回答by Bart Burg
It's a bit late, but recently I found this online conversion tool:
有点晚了，但是最近我发现了这个在线转换工具：
It helped me out though it sometimes reject valid css
它帮助了我，尽管它有时会拒绝有效的 css
回答by Hieu Nguyen
I have to convert CSS to SASS or LESS (depends on the project) quite often to keep my code clean. This is the tool I use: http://csstoss.com/
我必须经常将 CSS 转换为 SASS 或 LESS（取决于项目）以保持我的代码干净。这是我使用的工具：http: //csstoss.com/
You can convert CSS to SASS, SCSS or LESS in one place.
您可以在一处将 CSS 转换为 SASS、SCSS 或 LESS。
Hope it helps!
希望能帮助到你！
回答by Sri
I actually found something now: Leafo
我现在真的发现了一些东西：Leafo
It does a basic formating, e.g.:
它进行基本的格式化，例如：
#header {
/* ... */
}
#header p {
/* ... */
}
to
#header {
/* ... */
p {
/* ... */
}
}
Hope it helps!
希望能帮助到你！
And if you want to verify or anything to view the sass to css, you can try the sass online website... Try Sass Online
如果你想验证或任何查看sass转css的东西，你可以试试sass在线网站... Try Sass Online
