Комментарии 15
Зато многократное дублирование окажется в сгенеренном CSS.
Будьте добры, поясните.
Ну вообще хороший минифактор должен бы с этим справиться.
Вот я и спрашивал товарища выше по ветке Eklykti, мол что он имеет в виду: дублирование селекторов в одном правиле, дублирование правил, дублирование содержимого правил. Товарищ поступил по-английски.
В случае с кнопкой код генерируется следующего содержания
В случае с контентным блоком происходит дублирование правил, т.е.
Не, ну можно, конечно заморочиться, написать пару функций на SassScript, которые бы объеденили группу правил в одно, но зачем, если это задача постпроцессоров. В моём случае пусть не идеально, но кое-где ClosureCompiler генерирует конструкции
Но суть поста не в этом. В статье я обращаю внимание на то, что с элементами интерфейса можно, а порой и нужно, работать как с объектами реального мира. Профит для разработчика — структурирование и быстрое масштабирование.
В случае с кнопкой код генерируется следующего содержания
.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))}}
// код после обфускатора
Но суть поста не в этом. В статье я обращаю внимание на то, что с элементами интерфейса можно, а порой и нужно, работать как с объектами реального мира. Профит для разработчика — структурирование и быстрое масштабирование.
stardust_kid, добавил примеры генерируемого кода в статью. Благодарю за совет.
Подскажите для незнающих SCSS: я правильно понимаю, что $contentWidth задается где-то во внешнем коде в значение 640?
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Режимы и состояния в SCSS