Режимы и состояния в SCSS

[Eklykti]

Зато многократное дублирование окажется в сгенеренном CSS.

[apian]

Будьте добры, поясните.

[k12th]

Ну вообще хороший минифактор должен бы с этим справиться.

[apian]

Вот я и спрашивал товарища выше по ветке Eklykti, мол что он имеет в виду: дублирование селекторов в одном правиле, дублирование правил, дублирование содержимого правил. Товарищ поступил по-английски.

В случае с кнопкой код генерируется следующего содержания

.button__blue    { style for button__blue(bg ,color, border) }
.button__purple { style for button__purple(bg ,color, border) }
// дублирования нет

В случае с контентным блоком происходит дублирование правил, т.е.

@media screen and (min-width: 1240px) {
  pre.ui-code {
    padding-left: calc((100% - 640px)*(1/3));
    padding-right: calc((100% - 640px)*(2/3));
  }
}

// содержимое правила для сниппета «дублирует» содержимое правила для, скажем, изображения
@media screen and (min-width: 1240px) {
  .ui-img.ui-img_narrow {
    margin-left: calc((100% - 640px)*(1/3));
    margin-right: calc((100% - 640px)*(2/3));
  }
}

Не, ну можно, конечно заморочиться, написать пару функций на SassScript, которые бы объеденили группу правил в одно, но зачем, если это задача постпроцессоров. В моём случае пусть не идеально, но кое-где ClosureCompiler генерирует конструкции

@media screen and (min-width:1240px){.cs,.d1,.ce{margin-left:calc((100% - 640px)*(1/3));margin-right:calc((100% - 640px)*(2/3))}}
// код после обфускатора

Но суть поста не в этом. В статье я обращаю внимание на то, что с элементами интерфейса можно, а порой и нужно, работать как с объектами реального мира. Профит для разработчика — структурирование и быстрое масштабирование.

[apian]

не ClosureCompiler, конечно, а CSSO

[k12th]

Ну вот и я о том же.

[Eklykti]

Чисто по коду казалось что результат совсем страшный будет. По примерам же оказалось, что вроде бы всё не так уж и печально.

[apian]

Так точно. И код на первый взгляд страшноватый, а если разобраться, то понятно, хоть и заморочно. Но при большом количестве сущностей с релевантным представлением, подход зачёт. Благодарю за возвращение)

[apian]

stardust_kid, добавил примеры генерируемого кода в статью. Благодарю за совет.

[guyfawkes]

Подскажите для незнающих SCSS: я правильно понимаю, что $contentWidth задается где-то во внешнем коде в значение 640?

[apian]

Да, всё верно, это глобальная переменная проекта.

[SerDIDG]

Стоило бы указывать шапку проекта, тоже поначалу не ясно.