开发者

CSS 2 Sass: How do I change the output format of the generated SCSS?

开发者 https://www.devze.com 2023-01-06 17:46 出处:网络
I want to convert CSS to SCSS that looks like this: .top { margin-top: 1em; margin-bottom: 1em; nav { background: #333;

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

0

精彩评论

暂无评论...
验证码 换一张
取 消