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

UFO just landed and posted this here

Eklykti Dec 12 2015 at 03:04

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

apian Dec 12 2015 at 05:22

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

k12th Dec 13 2015 at 00:14

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

apian Dec 13 2015 at 08:39

Вот я и спрашивал товарища выше по ветке 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 Dec 13 2015 at 08:45

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

k12th Dec 13 2015 at 16:43

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

Eklykti Dec 14 2015 at 12:47

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

apian Dec 14 2015 at 13:36

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