Существуют ли какие-либо форматиры кода Sass?

Есть ли какой-либо форматировщик кода для кода Sass (SCSS)? Я знаю, как отформатировать выходной CSS-код, сгенерированный компилятором SCSS, но как обеспечить хорошее автоматическое форматирование для самого SCSS-кода?

Я пробовал некоторые онлайн-форматирования CSS, но они не работают с кодом SCSS.

Если я дам это им

.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; }
 }

они дают этот выход

.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;
}

которые удаляют эту часть ul li {}

Ответы

Ответ 1

Интернет

Вставьте свой CSS/SCSS/LESS в dirtystylesheet.com и нажмите Clean

Через командную строку

С помощью командной строки вы можете переформатировать CSS/SCSS/Sass с помощью sass-convert script:

$ sass-convert messy.scss clean.scss

или CSS для SCSS:

$ sass-convert messy.css clean.scss

или SCSS для Sass:

$ sass-convert messy.scss clean.sass

sass-convert script устанавливается при установке Sass. Он может преобразовывать любое направление между: css, scss и sass.

Подробнее о sass-convert:

Доступ к встроенной справке: $ sass-convert --help
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#syntax
http://sass-lang.com/docs/yardoc/#executables

Расширенный пользовательский совет:. Поскольку синтаксис Sass намного более строгий (допускает только одну пару property: value на строку), вы с меньшей вероятностью столкнетесь с проблемой с беспорядочным кодом.

Ответ 2

http://hilite.me/ - поддерживает Sass и Scss

JSFiddle тоже сделает трюк. Просто нажмите кнопку TidyUp

Ответ 3

Pretty Diff разделит " $" на ваши переменные.

Вы можете попробовать: http://www.prettyprinter.de/

Он не идеален, но, по крайней мере, он отдает дополнительный уровень для вложенных правил, и из того, что я видел, все содержимое scss не тронуто (.ie не снимает его).

Привет

Ответ 4

Я запустил код через Pretty Diff, и я получил этот вывод:

.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;
    }
}

Это то, что вы ищете? Это выглядит странно для CSS.

Ответ 5

Если вы используете возвышенный текст, я могу порекомендовать SassBeautify для быстрого форматирования любого sass/scss https://packagecontrol.io/packages/SassBeautify