Что такое препроцессоры css

Что такое препроцессоры css

22 декабря 2014

Эта статья очень спорная, я много думал до того, как опубликовать её. Пожалуйста, постарайтесь быть открытыми и прочитать статью до конца, прежде чем что-либо комментировать. Она не должна стать причиной войны. Прочитайте, пожалуйста, статью о моём блоге, чтобы понять его суть и моё мнение обо всём этом.

Я обдумывал использовать CSS-препроцессоры такие как Sass, LESS, Stylus и другие, достаточно долго. Каждый раз, когда меня спрашивали, использую ли я какие-то из этих инструментов, я отвечал, что я привык к моему текущему рабочему процессу и не вижу причины его менять, поскольку проблемы, которые решают эти инструменты, — не те проблемы, что есть у меня в CSS. Но вчера я прочитал две статьи, которые заставили меня пересмотреть свой взгляд, и я решил потратить немного времени изучая альтернативы и перенести часть кода, чтобы посмотреть, помогут ли препроцессоры сохранить мой код более организованным/удобным в обслуживании и/или сможет ли это сделать процесс разработки проще (с учётом того, развивались ли эти инструменты в последние несколько лет).

Для опытного разработчика изучение большинства возможностей препроцессоров занимает пару часов (после того, как вы изучили первую пару, следующие идут легче). Но если у вас нет навыков программирования кроме как CSS/HTML и/или вы не знаете основной логики программирования (циклы, функции, области видимости), это, возможно, займёт больше времени. Командная строка — это ещё одно препятствие для CSS/HTML разработчиков. Но не в этом цель статьи, я буду конкретно говорить о злоупотреблении этими возможностями. Я попробую объяснить большую часть основных проблем, которые я вижу, когда каждый раз кто-то показывает мне пример кода, или я вижу проект, написанный с использованием любого из этих препроцессоров.

Примеси

Что такое примеси?

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

Глупое дублирование кода является глупым

Следуя синтаксису SCSS (Sass), примеси могут быть описаны и использованы следующим образом:

Что компилируется в:

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

Эта проблема не является специфичной для Sass, она также существует в LESS, и в Stylus, и в любом другом препроцессоре, который поддерживает эту возможность. Используя новый слой абстракции, разработчик не осознаёт, что он создаёт сильно дублирующийся код. Всегда сжимайте файлы CSS и JavaScript. Gzip очень хорошо сжимает дублирующиеся данные, так что эта проблема может быть несущественной на продакшене. Только учтите, что сгенерированный CSS-код будет тяжелее поддерживать в случае, если ваши будущие разработчики по каким-то причинам решат прекратить использование препроцессора и просто обновят сгенерированный CSS (может, у них не будет доступа к исходным файлам или не будет опыта работы с препроцессорами).

Расширение

LESS и Stylus не поддерживают ничего похожего на расширение, поэтому я выбрал SCSS (Sass) для написания примеров. Расширение — это что-то наподобие «более умной» примеси: вместо копирования и вставки свойств оно единожды установит множественный селектор для этих свойств.

Что компилируется в:

Намного ближе к тому, что обычный человек сделает вручную. Используйте примеси, если вам необходимо передать дополнительные параметры. Если вы заметили у себя использование одинаковых примесей, передающих одинаковые значения, несколько раз, вам следует создать базовый «тип», который будет наследоваться другими селекторами.

Расширения недостаточно

Обратите внимание, что расширение позволяет избежать дублирования кода, но может стать причиной возникновения другой проблемы. Если вы используете @extend одного базового класса много раз, вы можете получить CSS-правило содержащее тысячи селекторов, что плохо скажется на производительности и могло даже привести к падению браузера.

Другая проблема в том, что каждый класс, созданный для использования через @extend , будет включён в компилируемый файл (даже если он не используется). В некоторых случаях это может привести к проблеме (коллизия имён, размер файла) и сделает этот процесс нежизнеспособным при создания фреймворка наподобие Compass.

Я действительно желаю, чтобы Sass улучшил способ работы @extend (а также другие препроцессоры унаследовали бы аналогичную возможность), чтобы мы могли создавать много базовых классов для повторного использования в коде и не экспортировали бы их без необходимости. Что-нибудь наподобие:

Что компилируется в:

Я знаю, что такого рода возможность была уже предложена ранее.

Другой проблемой будет совмещение вложенных селекторов и @extend . Это может привести к нежелательным побочным эффектам.

Расширение и примеси могут быть неудобны в обслуживании

Вопреки общим знаниям, расширение других классов или создание примесей могут ухудшить обслуживание. Из-за того, что место, где вы использовали свойства, находится далеко от места, где они были определены, есть больше шансов, что вы измените свойства, не замечая, что затрагиваете множество объектов сразу, или не осознавая, к каким элементам эти изменения применятся. Это называется «тесная связь»:

Тесно связанным системам, как правило, присущи следующие особенности развития, которые чаще рассматриваются как недостатки:

  • Изменение в одном модуле обычно создаёт волновой эффект в изменениях в других модулях.
  • Группа модулей может потребовать больше усилий и/или времени в связи с увеличением межмодульной зависимости.
  • Конкретный модуль может быть труднее использовать и/или тестировать из-за необходимости включать зависимые модули.

Википедия

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

Максимально избегая редактирования базовых классов, следуйте «принципу открытости/закрытости» насколько это возможно (дополняйте базовые классы, не редактируйте их).

Вложенность

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

Что компилируется в:

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

Читайте также:  Как называется строка внизу экрана компьютера

Называйте меня странным, но я также считаю вложенный код тяжёлым для восприятия (так как я писал невложенным CSS более 7 лет).

Заключение

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

Моё отношение к этим препроцессорам такое же как и к CoffeeScript: отличный синтаксис и возможности, но слишком много накладных расходов для не такой реальной выгоды. Синтаксис в JavaScript это не проблема для меня, точно так же как и в CSS (и в большинстве языков). Вам всё равно необходимо понимать, как работает блочная модель, специфичность, каскадирование, селекторы, обтекание и так далее. Вы всего лишь добавляете абстрактную прослойку между собой и интерпретируемыми таблицами стилей, создаёте ещё один барьер для будущих разработчиков и увеличиваете шанс появления чрезмерного проектирования. Разметка может стать проще (с меньшим количеством классов/идентификаторов), но она приходит с большим количество недостатков.

Для меня главной проблемой являются разработчики, которые пишут на CSS без знаний необходимых для построения легко сопровождаемых масштабируемых структур. Таблицу стилей полную примесей, операций сравнения, циклов, переменных, функций будет так же тяжело поддерживать, как и раздутую вручную созданную таблицу стилей, а может даже и сложнее. Разработчики унаследовали желание быть «умными», а это обычно как красный флаг.

«Каждый знает, что отлаживание программы в два раза сложнее, чем её написание. Так если вы проявили максимум своих возможностей, когда писали эту программу, как же вы тогда вообще её отладите?» Брайан Керниган

Примеси сегодня популярны из-за браузерных префиксов. Проблема не в том, что CSS не поддерживает примеси или переменные нативно, а в том, что нам приходится писать абсурдное количество браузерных префиксов без нужной на то причины, поскольку большинство реализаций аналогичны и большинство возможностей чисто косметические. Проблема также не в синтаксисе языка, а в способе, которым браузеры добавляют новые возможности и людях, использующих их до общей реализации (без префиксов). Это может быть решено препроцессором, который всего лишь добавляет префиксы (без необходимости в примесях и в специальных языках), таким как cssprefixer. Попробуйте подумать, какую в действительности проблему вы пытаетесь решить и поищите разные решения.

«Пришло время упразднять браузерные префиксы. Они стали решением для несуществующей проблемы и активно вредят веб-стандартам» Питер-Пол Кох

Я использовал подход OOCSS на большинстве моих последних проектов и, скорее всего, продолжу использовать его, пока не найду лучшего. Для тех вещей, которыми я занимаюсь, важнее иметь возможность быстро верстать и вносить обновления на этапе разработки, нежели поддерживать/развивать проект в течение многих месяцев/лет. Мне кажется маловероятным, что придётся делать значительные изменения в дизайне без правки разметки. На моих последних 100 проектах это случилось 2-3 раза. CSS zen garden — классный концепт, но не очень практичный. Такая возможность, как desaturate(@red, 10%) крутая штука, но обычно дизайнеры предоставляют мне цветовую палитру, которую надо использовать на всём сайте, и я не так часто дублирую одни и те же значения. Если значения дублируются, я везде могу их поменять, используя «поиск и замену» внутри всех CSS-файлов и закончить на этом. Используя функцию генерирующую цвет (где вы понятия не имеете, какое значение получится) вы не сможете так просто сделать поиск и замену, поскольку вы не знаете, какое значение ищете в исходном коде (я предпочитаю просто использовать Color Picker).

Я знаю, что мой опыт сильно отличается от опыта большинства людей, поэтому мой подход тоже отличается. Если мне когда-нибудь придётся использовать любой из этих инструментов, это не будет для меня проблемой. Я только не думаю, что они сэкономят мне так много времени, что это перевесит количество недостатков. Выбирайте инструменты основываясь на ваших проектах и рабочем процессе. И не стоит отказываться использовать препроцессоры из-за пары проблем, которые я обозначил. Для многих задач препроцессоры будут отличным способом сгенерировать таблицы стилей. Думайте о недостатках и об ответственности.

С большой силой приходит большая ответственность дядя Бен

December 05, 2013

Статья на NetTuts+, написанная Johnathan Croom в 2012 году.

Основная цель статьи — показать преимущество использования любого из трех описанных в ней препроцессоров Sass, LESS и Stylus. Обзор прекрасно подойдет для новичков, которые только открывают для себя эту грань веб-дизайна.

В этой статье мы рассмотрим преимущества и выгоды использования трех различных препроцессоров — Sass, LESS и Stylus.

Введение

Препроцессоры CSS были созданы с одной единственной целью — добавить стилевым таблицам CSS мощь и одновременную гибкость без нарушения кросс-браузерности. Все препроцессоры компилируют созданный с помощью их синтаксиса код в стандартный CSS-код, который понимает и использует любой браузер, каким бы древним он (браузер) не был.

Существуют множество преимуществ, которые привносят препроцессоры в таблицы стилей CSS и в этой статье мы рассмотрим только некоторые из них, как хорошо известные, так и мало распространенные. Давайте приступим к обзору.

Синтаксис

Наиболее важной частью при написании кода в любом препроцессоре CSS является его синтаксис. В счастью для нас, синтаксис всех трех препроцессоров, которые мы будем рассматривать, имеют CSS-подобный вид.

Sass & LESS

Оба препроцессора Sass и LESS имеют стандартный CSS-синтаксис. Это делает задачу конвертирования уже существующего CSS-кода в синтаксис любого из этих препроцессоров простой и быстрой. Sass использует для своих файлов расширение , LESS — расширение .

Вид обычного файла в синтаксисе Sass или LESS представлен ниже:

Хорошо видно, что это обычный синтаксис CSS, который прекрасно конвертируется в Sass (SCSS) или LESS.

Важно обратить внимание, что Sass (SCSS) также имеет старую версию синтаксиса Sass, в которой опущены точки с запятой и фигурные скобки.

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

Синтаксис Sass (старая версия) выглядит следующим образом:

Stylus

Для своих файлов этот препроцессор использует расширение . Синтаксис препроцессора Stylus более многословный (прим. переводчика: автор что-то напутал здесь) в нем применяется за основу стандартный синтаксис CSS, но допускается применение различного сочетания скобок, двоеточий и точек с запятой.

Читайте также:  Гугл переводчик с казахского языка

Примеры синтаксиса Stylus:

Все варианты синтаксиса, показанные выше, являются валидными и в результате компиляции получается правильный CSS-код. Например, такой код скомпилируется в стандартный CSS без ошибок:

Переменные

В препроцессорах переменные объявляются и используются внутри файлов стилей CSS. Переменные могут принимать любое значение, допустимое в CSS (цвет, число или текст) и может ссылаться из любого места CSS-документа.

В препроцессоре Sass переменная объявляется с помощью символа , при этом имя переменной и ее значение отделяются друг от друга двоеточием так, как это делается в CSS:

Переменные в LESS точно такие же, как и в Sass, за исключением того, что перед именем переменной ставится символ :

Stylus

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

Еще один достойный упоминания момент заключается в том, что Stylus (0.22.4) компилирует код, даже если в нем имя переменной объявлено с помощью символа , но при вызове этой переменной в коде подстановки значения переменной не происходит.

Другими словами, не выполняется такая операция:

Скомпилированный CSS

Каждый из представленных в виде примера файлов компилируется в точно такой же CSS-код. Вы можете включить воображение, чтобы представить, насколько полезными могут быть переменные.

Благодаря им отпадает необходимость задавать значение цвета и потом двадцать раз повторять его в CSS-коде. Или же поставлена задача изменить ширину сайта и для этого необходимо “перерыть” код в поисках этой величины.

Прим. переводчика: здесь автор немного утрирует ситуацию, так как в любом нормальном редакторе кода имеется функция поиска.

Ниже представлен CSS-код после выполнения компиляции:

Вложенность (nesting)

Если в коде CSS поставлена задача обратиться одновременно к нескольким элементам, имеющим одного и того же родителя, то писать снова и снова этого родителя — занятие утомительное.

Вместо этого, используя возможности препроцессора, мы можем поместить все дочерние селекторы внутри скобок элемента-родителя. Кроме того, символ является ссылкой (сокращением) на селектор элемента-родителя.

Sass, LESS & Stylus

Все три препроцессора имеют абсолютно одинаковый синтаксис для вложенных селекторов:

Скомпилированный CSS

Ниже показан скомпилированный в CSS результат кода, представленного выше. Сравните с тем кодом, который мы писали в самом начале — абсолютно одинаково. Но какое удобство при использовании преимуществ препроцессора!

Подмешивания (mixins)

Миксины являются функциями, которые позволяют многократно использовать сгруппированные свойства внутри CSS-кода. Вместо того, чтобы просматривать весь код в поисках нужных строчек для их изменения, теперь можно вносить изменения только один раз, внутри миксина.

Применение подмешиваний особенно оправдывает себя при создании специфичных стилей для элементов или простановке браузерных префиксов. Когда миксин вызывается внутри CSS-селектора, происходит распознавание аргументов этого миксина, затем его стили применяются к селектору, который его вызвал.

Прим. переводчика: в приведенных ниже примерах стоит обратить внимание на разницу в синтаксисе объявления и вызова миксина внутри CSS-селектора для всех трех препроцессоров.

Style

Скомпилированный CSS

Результатом компиляции из всех трех препроцессоров будет одинаковый CSS-код:

Наследование (inheritance)

При написании CSS стилей “классическим” способом, для того чтобы применить одни и те же свойства к нескольким элементам в HTML-документе, нам следовало бы создать такой код:

Все работает прекрасно. Но если потребуется написать стили отдельно для любого из этих селекторов, нужно будет создавать отдельные правила для каждого из них. И сразу же код таблиц стилей становиться неряшливым и трудно поддерживаемым.

В противоположность этому применяются наследование. Наследование — это возможность для одних CSS-селекторов наследовать свойства у другого селектора.

Прим. переводчика: обратите внимание на одинаковый синтаксис подключения (объявления) наследования внутри CSS-селектора с помощью директивы .

Sass & Stylus

Скомпилированный CSS

Препроцессор LESS не поддерживает наследование в полной мере так, как это организовано в Sass или Stylus. Вместо добавления множественных селекторов в один набор свойств, наследование трактуется как миксин без аргументов.

Импорт стилей выполняется для каждого селектора. Обратной стороной такого подхода является постоянное повторение строк со свойствами в компилированном CSS-стиле.

Вот как может выглядеть LESS-код с наследованием:

Скомпилированный CSS

Как хорошо видно из кода, стили класса добавлены для селекторов, которым требуется задать наследование у этого класса.

Прим. переводчика: код действительно получается избыточным, просто для каждого селектора тупо добавляются строки класса .

Импортирование

В CSS-сообществе к импортированию стилей с помощью директивы существует стойкое негативное отношение, так как такой подход порождает множественные HTTP-запросы к серверу, что замедляет работу браузера и нагружает сам сервер. Однако, в препроцессорах технология импортирования работает иначе.

В любом из трех препроцессоров импортирование одного файла внутрь другого фактически приводит к вставке кода одного файла в другой при компиляции, в результате которой получается один CSS-файл.

Прим. переводчика: другими словами, в препроцессорах импортирование необходимо для компиляции одного файла из нескольких. В стандартном CSS импортирование приводит к подстановке одного кода внутрь другого.

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

Скомпилированный CSS

Функции работы с цветом

“Цветовые” функции созданы для трансформации цвета при компиляции. Такие функции чрезвычайно полезны при создании градиентов, затемнения цвета при и многое другое.

Представленный выше код является всего лишь кратким списком функций работы с цветом в Sass. Полный список всех доступных функций расположен по адресу Sass Documentation.

“Цветовые” функции могут использоваться везде, где требуется работа с цветов в коде. Простой пример — объявлена переменная с цветом, к которой дальше в коде применяется функция затемнения цвета :

Список функций препроцессора LESS находится на официальном сайте проекта LESS Documentation.

Ниже показан пример того, как можно применять “цветовые” функции в LESS:

Stylus

Полный список всех функций работы с цветом препроцессора Stylus представлен на сайте проекта Stylus Documentation.

И пример использования “цветовой” функции в Stylus:

Арифметические операции

Благодаря препроцессорам выполнение арифметических операций внутри CSS-кода теперь осуществляется просто и легко. Такая возможность часто бывает полезной.

Прим. переводчика: стоит упомянуть о функции из CSS3 по имени , которая также позволяет выполнять внутри CSS-кода простые арифметические операции.

Sass, LESS & Stylus

Практические примеры

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

Читайте также:  Яндекс карты с панорамами улиц

Браузерные префиксы

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

Например, создадим для всех трех препроцессоров миксин скругления углов блока:

Stylus

Скомпилированный CSS

Трехмерный текст

Создание эффекта трехмерности для текста с помощью CSS-свойства является прекрасной идеей. Единственная проблема заключается в работе с цветом, которая достаточно трудная и обременительная.

Используя миксины и функции для работы с цветом, мы можем создать объемный текст и изменять его цвет на лету:

Stylus

В примере для Stylus я выбрал вариант написания свойства в одну строку, так как здесь я опустил фигурные скобки.

Скомпилированный CSS

Колонки

Использование переменных и числовых значений для этих переменных пришла мне в голову, когда я только начал знакомиться с возможностями CSS-препроцессоров. Объявление ширины для макета внутри переменной делает задачу изменения этой ширины (при необходимости) простой и быстрой:

Stylus

Скомпилированный CSS

Некоторые уловки препроцессоров

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

Сообщение об ошибках

Если вы уже пишите код на CSS достаточно давно, то наверняка сталкивались с ситуацией, когда внутри кода закралась ошибка, которую вы никак не можете найти. Если вы попадали в точно такую же ситуацию, то могу вас обрадовать — существует способ решить такую задачу.

CSS-препроцессоры могут сообщать об ошибках в коде и заставить их поступать таким образом достаточно просто. В этом случае препроцессор сам сообщает вам, в каком месте CSS-кода находиться ошибка (и все счастливы).

Если вас заинтересовала подобная возможность во всех трех препроцессорах, то в этой статье подробно описано, как выполнить данную настройку.

Комментирование

В CSS-препроцессоре при компиляции из кода удаляются любые комментарии в виде двойного слеш’а ( ). Но, в тоже время, блочные комментарии ( ) остаются в коде без изменений.

На заметку: при компиляции в минимизированную версию CSS-файла удаляются любые комментарии.

Заключение

Каждый из трех рассмотренный в этой статье CSS-препроцессоров (Sass, LESS и Stylus) обладает своим собственным, уникальным способом решения одной и той же задачи. Это дает в руки разработчика возможность выбора, каким способом выполнить поставленную задачу. Объединяет все препроцессоры способность расширить горизонты кодера с одновременным сохранением кросс-браузерности и чистоты кода.

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

  • Like
  • Tweet
  • +1

Angular — именованные outlets

Для меня немного запутанная картина с именованными областями отображения и главное — с правильной настройкой. Нужно немного прояснить для. … Continue reading

Давно не заходил на тостер, и вдруг наткнулся на вопрос о препроцессорах CSS. Стало интересно — что это за зверь.

Почитал несколько сайтов с описанием, что это и для чего. Посмотрел примеры. Но ничего не понял — а зачем? В чем смысл?

Суть моего вопроса:

1) Препроцессоры позволяют вводить переменные и миксины. Но ведь в CSS можно просто создать свойство

и применять его ко всем элементам, где это нужно.
Какая разница — вписать в HTML

или использовать в файле стиля переменную, которую так же придется добавлять к какому-то желаемому типу объектов? Мне совсем не понятно.

2) Валидность CSS.

Препроцессор компилирует ваш "красивый сахарный" синтаксис в валидный CSS.
А в чем сложность писать сразу валидный CSS? Тоже не совсем понятно.

3) Компилятор из препроцессорного языка в CSS.

Ну это же дополнительный инструмент! Зачем городить что-то еще, если все и так без всяких компиляций работает. Куча программ на компьютере — тоже лишнее.

4) Удобочитаемость кода, и простой поиск,

Ну, это я тоже не пойму. Любой нормальный редактор кода умеет по нажатию горячей клавиши приводить все отступы и т.д. в порядок. Код становится красивым и читабельным. Да и мне не понятно — что такого в CSS может быть не читаемым? Есть класс, а в фигурных скобках — свойства. Что тут нечитабельное может быть?

Поиск — тоже не вижу сложности. В браузере — F12, он выстроит красивое дерево элементов с их стилями, а у каждой строчки стиля указан файл и строка, в которой это свойство указано. Даже можно мышкой тыкнуть, и откроется окно с указанным файлом и искомой строкой.

5) Возможность инклюда (include) в препроцессорах.

Можно же в HTML файле инклюдить нужные CSS через link rel=. . Чем инклюд в препроцессорах удобней, чем эта стандартная возможность?

Создал пару файлов CSS, и суй их в HTML там где они тебе нужны. В админке — один, в гостевой книге — другой, в фотоальбоме — третий, или смешивать при необходимости. Ведь если называть классы элементов с умом, то никаких пересечений не получится, и все будет работать.

6) Вложенность свойств.

Не понимаю, каким образом такой код:

удобочитаемей, чем обычный CSS:

7) На хабре видел в комментариях обсуждение, мол можно даже задавать в препроцессорах — какие браузеры поддерживать. Ахтунг! А зачем писать такие стили, которые не будут работать в старых браузерах?

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

Могу предположить, что такая ситуация у меня слоилась из-за того, что я в основном пишу маленькие проекты, а в больших проектах это действительно как-то помогает, но я не могу представить такую ситуацию.

Ссылка на основную публикацию
Что значит спящий режим компьютера
В операционной системе Windows есть несколько режимов выключения компьютера – это обыкновенный режим, (который полностью выключает PC), режим гибернации и...
Чем открыть файл с расширением dat
После установки каких-нибудь программ, получения почты при помощи почтовых клиентов, на компьютере создаются .dat файлы. Чаще всего они почти не...
Чем отличается frontend от backend
Переводы , 13 апреля 2017 в 19:58 Мая Устинова Вы наверняка уже слышали эти модные в сфере программирования слова «фронтенд»...
Что значит сторнировать документ
Сто́рно (итал. storno — перевод на другой счёт, отвод; от stornare — поворачивать обратно) — в общем смысле возврат к...
Adblock detector