Стилус не работает с допустимым css

Одной из причин компиляции, по которой я выбрал стилус, было то, что он может работать с обычным CSS в файлах стилуса ( поэтому я мог бы конвертировать по мере необходимости вместо того, чтобы конвертировать все сразу), однако это не похоже на правду. Следующий файл .styl:

.page-wrap
{
    min-height: 300px;
    font-size: 1.4em;
    line-height: 1;
    min-width: 940px;
    max-width: 1170px;
    margin: 0 auto;
}

компилируется в этот файл .css:

.page-wrap,
{
  min-height: 300px;
  font-size: 1.4em;
  line-height: 1;
  min-width: 940px;
  max-width: 1170px;
  margin: 0 auto;
}

Дополнительная запятая в конце селектора недействительна.

Стилус не должен работать с обычным css или это ошибка (я использую последнюю версию из npm)?


css stylus
person ryanzec    schedule 13.06.2012    source источник
comment
Я почти уверен, что это баг...   -  person BoltClock    schedule 13.06.2012
comment
что такое стилус? пожалуйста, свяжите это.   -  person cweiske    schedule 14.06.2012
comment
Stylus — это инструмент CSS, похожий на less. learnboost.github.com/stylus   -  person Derek Adair    schedule 06.08.2012
comment
@ryanzec github.com/stylus/stylus/issues/585#issuecomment-42783900< /а>   -  person Tim Groeneveld    schedule 20.07.2015

Ответы (4)


arrow_upward
4
arrow_downward

Это не совсем ошибка. Поместите открывающую фигурную скобку в ту же строку, что и селектор, и я думаю, что она исчезнет.

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

person lunelson    schedule 14.06.2012

arrow_upward
2
arrow_downward

Некоторое время назад я подал заявку по этому поводу, и проблема должна быть исправлена ​​в версии 0.45.0.

person kizu    schedule 19.10.2012

arrow_upward
0
arrow_downward

Стилус не использует теги {}, вам не нужно использовать {}. Пример:

.page-wrap,
    min-height: 300px;
    font-size: 1.4em;
    line-height: 1;
    min-width: 940px;
    max-width: 1170px;
    margin: 0 auto;
person user2525449    schedule 12.08.2015

arrow_upward
0
arrow_downward 

.page-wrap
{
    min-height: 300px;
    font-size: 1.4em;
    line-height: 1;
    min-width: 940px;
    max-width: 1170px;
    margin: 0 auto;
}

Производит

.page-wrap {
    min-height: 300px;
    font-size: 1.4em;
    line-height: 1;
    min-width: 940px;
    max-width: 1170px;
    margin: 0 auto;
}

на меня. источник

person JordyvD    schedule 02.11.2015