Czy są jakieś formatery kodu Sass?

Question

Czy istnieje dowolny program do formatowania beautifier kodu dla kodu Sass (SCSS)? Wiem, jak sformatować wyjściowy kod CSS wygenerowany przez kompilator SCSS, ale jak uzyskać ładne automatyczne formatowanie samego kodu SCSS?

Próbowałem już formatyzatora CSS online, ale nie działają one z kodem SCSS.

jeśli dam im to

.list5 { 
    border-bottom: 1px solid #f2f2f1; 
    padding: 0 0 20px 0; 
    margin: 0 0 20px 0; 
ul li { 
    margin: 0 0 5px 25px !important; 
    height: auto !important; 
    background: none !important; 
    font-size: 14px; 
    padding: 18px 3px 5px !important; 
    width: 169px !important; } 
} 

dają to wyjście

.list5 { 
    border-bottom: 1px solid #f2f2f1; 
    padding: 0 0 20px 0; 
    margin: 0 0 20px 0; 
    margin: 0 0 5px 25px !important; 
    height: auto !important; 
    background: none !important; 
    font-size: 14px; 
    padding: 18px 3px 5px !important; 
    width: 169px !important; 
} 

które usuwają tę część ul li {}

Answer 1

Online

wklej CSS/SCSS/LESS w do dirtystylesheet.com i uderzył Clean

Via Command Line

poprzez linię poleceń można ponownie Format CSS/SCSS/Sass pomocą sass-convert skrypt:

$ sass-convert messy.scss clean.scss 

lub CSS SCSS:

$ sass-convert messy.css clean.scss 

lub SCSS na Sass:

Skrypt sass-convert jest instalowany podczas instalacji Sass. Może konwertować dowolny kierunek pomiędzy: css, scss i sass.

Dowiedz się więcej o sass-convert:

• dostęp do wbudowanej pomocy: $ sass-convert --help
• http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#syntax
• http://sass-lang.com/docs/yardoc/#executables

zaawansowane końcówki użytkownik: Ponieważ składnia sass jest znacznie bardziej rygorystyczne (dopuszcza się tylko jeden property: value para na linię) mniej prawdopodobne jest, że napotkasz problem z niechlujnym kodem.

Answer 2

Pobiegłem kodu poprzez Pretty Diff i mam to wyjście:

.list5 { 
    border-bottom:1px solid #f2f2f1; 
    padding:0 0px 20px 0px; 
    margin:0 0px 20px 0px; 
    ul li { 
     background: none !important; 
     font-size: 14px; 
     height: auto !important; 
     margin: 0px 0px 5px 25px !important; 
     padding: 18px 3px 5px !important; 
     width: 169px !important; 
    } 
} 

jest to, czego szukasz? Wygląda dziwnie na CSS.

Answer 3

Pretty Diff usunie "$" ze zmiennych.

Można spróbować: http://www.prettyprinter.de/

To nie jest idealne, ale przynajmniej to wcięcie dodatkowy poziom dla zagnieżdżonych zasad iz tego co widziałem zachowuje wszystkie rzeczy SCSS nietknięty (.ie nie pozbawia go).

Pozdrowienia

Answer 4

http://hilite.me/ - obsługuje Sass i SCSS

JSFiddle rade, jak również. Wystarczy nacisnąć przycisk

Answer 5

TidyUp Jeśli używasz Sublime Text mogę polecić SassBeautify szybko formatować żadnemu Sass/SCSS https://packagecontrol.io/packages/SassBeautify