Форматтер SCSS
Форматируйте таблицы стилей Sass SCSS с помощью этого форматтера SCSS. Вставьте SCSS, и инструмент оформит вложенные правила, переменные, миксины, включения, родительские селекторы и управляющие директивы: с отступом в два пробела, одним объявлением на строку, пробелом после двоеточий в свойствах и недостающими точками с запятой. Интерполяции и комментарии сохраняются, поэтому фронтенд-разработчики могут приводить в порядок частичные файлы и фрагменты кода без компиляции.
Часто задаваемые вопросы
Как работает форматтер SCSS?
Он считывает таблицу стилей как последовательность токенов: фигурных скобок, точек с запятой, двоеточий, строк и комментариев, а затем на их основе заново выстраивает код. Каждая открывающая скобка начинает блок с отступом, а каждое объявление размещается на отдельной строке.
Поддерживается вложенность?
Да, вложенные правила и родительские селекторы, например &:hover, получают отступ на один уровень глубже родительского — по два пробела на уровень. Двоеточия селекторов остаются на месте, поэтому &:hover не разбивается.
Как форматируются переменные, миксины и включения?
После двоеточия в переменных, например $color: #333;, ставится пробел, а @mixin и @include сохраняют свои аргументы с пробелом после каждой запятой. Перед скобкой в управляющих директивах, таких как @if, @each и @for, ставится пробел.
Интерполяции сохраняются?
Да, интерполяции, например #{$name}, копируются точно в исходном виде. Это относится и к интерполяциям внутри селекторов, например .icon-#{$name}, и внутри имен свойств.
Инструмент компилирует или проверяет мой SCSS?
Нет, он не компилирует код в CSS и не проверяет синтаксис, поэтому форматирует даже незавершенные фрагменты. Используйте компилятор Sass, чтобы найти ошибки и получить CSS.
Сохраняются ли комментарии?
Да. Строчные комментарии, начинающиеся с //, заканчиваются вместе со своей строкой, а блочные комментарии сохраняются на прежних местах.
Работает ли он с синтаксисом Sass с отступами?
Нет, он предназначен для SCSS, где используются фигурные скобки и точки с запятой. В файлах с синтаксисом .sass на основе отступов нет скобок, от которых можно отталкиваться при форматировании, поэтому сначала преобразуйте их в SCSS.
Можно ли изменить отступ?
Нет, в результате всегда используются два пробела, а у форматтера нет параметров. Поэтому для одной и той же таблицы стилей всегда получается одинаковый результат.
Почему результат заключен в блок кода scss?
Результат возвращается в виде блока кода Markdown с пометкой scss и отображается с подсветкой синтаксиса. Скопируйте строки между разделителями в свой файл .scss.
Какого размера может быть моя таблица стилей?
До 5 MB за один запуск; более крупный ввод отклоняется с сообщением. Результат идентичен варианту SCSS форматтера кода.