SASS компилировать с комментариями

Question

Я компилирую файл SCSS, и он, кажется, удаляет мои комментарии.Какую команду я могу использовать, чтобы сохранить все комментарии?

>SASS input.scss output.css

Я вижу два типа комментариев в моем SCSS.

// Comment

и

/* Comment */

Чтоэто разница?

Answer 1

Как сказал @Roy выше, многострочные комментарии (/ * * /) сохраняются в результирующем css, но это зависит от формата, который вы используете для предварительной обработки SASS.

Если вы используете компактный режим или любой другой 'CSS minifier' , вам лучше использовать

/*! important comment */

Эти комментарии сохраняютсяв компактных (минимизированных) версиях вашего CSS.

Пример:

html {
     /*! important comment */
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}

Результат (компактная минимизированная версия):

html{/*! important comment */-webkit-box-sizing:border-box;box-sizing:border-box}

Answer 2

Разница между двумя типами комментариев довольно проста:

// Some comment for a single line

и

/* This is 
a multiline comment
for large descriptions */

Согласно официальным документам SASS , вы можетеиспользуйте параметр многострочного комментария, чтобы сохранить его в скомпилированном выходном файле.

Как и Sass, SCSS поддерживает как комментарии, которые сохраняются в выводе CSS, так и комментарии, которых нет.Тем не менее, комментарии SCSS значительно более гибкие. Он поддерживает стандартные многострочные комментарии CSS с / * * /, которые по возможности сохраняются в выводе. Эти комментарии могут иметь любой формат, который вам нравится;Sass сделает все возможное для их удобного форматирования.

SCSS также использует // для отбрасываемых комментариев , как Sass.В отличие от Sass, // комментарии в SCSS могут появляться где угодно и продолжаться только до конца строки.

Таким образом, следующий CSS:

/* This comment
should be kept
and not be thrown away */
.class {
    margin: 0 auto;
}

// This comment will be thrown away
.extra-class {
    color: blue;
}

будет скомпилирован в:

/* This comment
should be kept
and not be thrown away */
.class {
    margin: 0 auto;
}

.extra-class {
    color: blue;
}

Чтобы исправить проблемы с компиляцией, необходимо преобразовать комментарии // в /* */.