Pull to refresh

Comments 15

UFO just landed and posted this here
Зато многократное дублирование окажется в сгенеренном CSS.
Будьте добры, поясните.
Ну вообще хороший минифактор должен бы с этим справиться.
Вот я и спрашивал товарища выше по ветке 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))}}
// код после обфускатора


Но суть поста не в этом. В статье я обращаю внимание на то, что с элементами интерфейса можно, а порой и нужно, работать как с объектами реального мира. Профит для разработчика — структурирование и быстрое масштабирование.
не ClosureCompiler, конечно, а CSSO
Ну вот и я о том же.
Чисто по коду казалось что результат совсем страшный будет. По примерам же оказалось, что вроде бы всё не так уж и печально.
Так точно. И код на первый взгляд страшноватый, а если разобраться, то понятно, хоть и заморочно. Но при большом количестве сущностей с релевантным представлением, подход зачёт. Благодарю за возвращение)
UFO just landed and posted this here
stardust_kid, добавил примеры генерируемого кода в статью. Благодарю за совет.
UFO just landed and posted this here
Подскажите для незнающих SCSS: я правильно понимаю, что $contentWidth задается где-то во внешнем коде в значение 640?
Да, всё верно, это глобальная переменная проекта.
Стоило бы указывать шапку проекта, тоже поначалу не ясно.
Only those users with full accounts are able to leave comments. Log in, please.