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

Question

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

>SASS input.scss output.css

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

// Comment

а также

/* Comment */

В чем разница?

Answer 1

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

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

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

Answer 2

Как сказал @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}