CSS 2 Sass: How do I change the output format of the generated SCSS?
I want to convert CSS to SCSS that looks like this:
.top {
margin-top: 1em;
margin-bottom: 1em;
nav {
background: #333;
}
ul {
padding: 0;
display: table-row;
}
li {
display: table-cell;
}
}
Instead, I am getting this:
.top {
margin-top: 1em;
margin-bottom: 1em;
nav {
background: #333; }
ul {
padding: 0;
开发者_JAVA技巧 display: table-row; }
li {
display: table-cell; } }
How do I change the output indentation in the command:
sass-convert public/stylesheets/application.css public/stylesheets/application.scss
Thanks!
According to the docs (and checking 'sass-convert -h' on the command line) there is no way to change the output style when going from css to scss (or sass).
I had this same problem so I used the following Python to do some post-processing and fix up the generated output to the :expanded
output style:
import sys
import re
path = sys.argv[1]
scss = open(path).read()
# Fix up the indentation of closing braces to use a :expanded rather than :nested style.
scss = re.sub(r'\t(\t*)([^\}\n]*;) (\}.*)', r'\t\1\2\n\1\3', scss)
for i in range(0, 10):
# This line is executed multiple times to fix up multiple closing braces on a single line.
scss = re.sub(r'\t(\t*)\};? \}', r'\t\1}\n\1}', scss)
open(path, 'w').write(scss)
You can do this using this tool http://css2sass.heroku.com/
I have used this to convert CSS into SCSS
精彩评论