Для чего используют препроцессоры css

Препроцессоры в CSS: что это и для чего нужны

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

Применение препроцессоров в CSS

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

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

Основные задачи CSS-препроцессоров

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

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

Разновидности CSS-препроцессоров

В разработке используется три популярных препроцессора:

Более подробно каждый из них рассмотрим дальше в статье.

Дополнительно можно выделить еще препроцессоры, используемые в узких кругах: Closure Stylesheets и CSS Crush. Разработчику есть смысл знакомиться с ними только для решения определенных задач, которые встречаются очень редко, поэтому тратить время на их изучение начинающему верстальщику бессмысленно.

Почему стоит использовать препроцессоры

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

Возможность записать код короче

В стандартном CSS нет возможности делать вложенности, создавать переменные. Это сильно усложняет написание большого объема стилей, создает необходимость дублировать одинаковые участки кода, а также помнить название всех ID и классов. Благодаря препроцессорам разработчик:

Легкость изучения

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

Простота применения

Логичная и понятная структура

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

Родительский селектор 1
Вложенный селектор 1.1
Вложенный селектор 1.2
Вложенный селектор 1.2.1
Вложенный селектор 1.2.2

Пример синтаксиса препроцессора

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

Добавление миксинов

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

Пример использования миксинов

Модули

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

Популярные CSS-препроцессоры

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

Примечательно, что у всех трех препроцессоров есть возможность математической обработки стилей, то есть вы их можете складывать, вычитать, умножать, делить. Данные операции можно делать не только с какими-то определенными величинами, например, размерами отступов, но и цветами.

Препроцессор LESS

Самый популярный CSS-препроцессор, берущий свое начало в 2009 году. Изначально был написан на Ruby, но сейчас работает полностью на JavaScript, что упрощает его дальнейшую поддержку. Прост в освоении, так как имеет только самые базовые компоненты, с которыми очень просто разобраться. Если вам будет не хватать функционала препроцессора, то его можно расширить за счет использования сторонних плагинов.

Пример синтаксиса LESS

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

Препроцессор SASS

Самый многофункциональный и старый из популярных CSS-препроцессоров. Первая версия вышла в 2007 году. Написан на Ruby, плюс, есть применение C++. Это пускай и делает язык более функциональным, но добавляет некоторые сложности для новичка, например, при подключении к проекту и его отладки. По сравнению с LESS имеет куда больше возможностей, часть которых выходит за рамки классического CSS, среди которых можно выделить автоматизацию некоторых моментов. Если представленного функционала будет не хватать, то его можно расширить за счет библиотеки Compass.

Пример синтаксиса SASS

Еще примечательно, что сам SASS имеет два принятых синтаксиса:

Препроцессор Stylus

Пример вложения классов в Stylus

Для подключения потребуется предварительно установить библиотеку Node.js и Gulp. В дальнейшем нужно выполнить инициализацию Stylus для проекта с помощью терминала. В некоторых редакторах кода, например, том же VS Code, можно автоматизировать подключение с помощью специальных плагинов.

Преимущества и недостатки препроцессоров

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

Преимущества:

Недостатки:

Заключение

Источник

Почему стоит использовать препроцессоры

У меня достаточно неплохой опыт в верстке — несколько лет.
За это время было многое — и табличная верстка, и собственные фреймворки, и IE6, и адаптивный дизайн, да что угодно — я всегда старался быть рядом с bleeding edge, как говорится.
Больше CSS-фреймворков (привет, бутстрап) и Emmet-а мне нравятся препроцессоры и я расскажу, почему. Возможно, покажется, что моя статья несколько устарела и сейчас все используют препроцессоры как само собой разумеющееся, но, увы, это не так. Недавно я встретил человека, который говорил о том, что ему быстрее писать CSS-код, нежели использовать препроцессоры. Мы долго спорили, на самом деле, ну очень долго, в итоге я решил выложить свои мысли здесь, в одном месте.

Less или Sass?

Ну, на самом деле, это дело каждого. Мне не нравился Sass из-за его медлительности — Less побыстрее выполнялся всегда, в итоге в один момент я решил перейти на Less, но через некоторое время оказалось, что мне не хватает его мощности! Увы, я так и не нашел, как реализовать банальный миксин уровня вот этого.
Но и медлительность Sass не устраивала, но именно в тот момент, когда я хотел обратно вернуться на Sass, но терзался сомнениями, мне посоветовали libsass, а т.к. я использую Grunt — мне было достаточно подключить только grunt-sass (и ничего больше, например, установка Ruby и гемов). Для меня выбор был ясен и с тех пор — только libsass. Мощность самого Sass и с скорость C — что еще нужно?
Stylus я пока не пробовал, как-нибудь потом.

Почему все-таки препроцессоры?

Переменные

Вложенность

Что может быть лучше вложенности :hover, :after, :before, :nth-child в родительский элемент?
Простой, очень простой пример:

Миксины, импорты и т.п.

Самый главный плюс препроцессоров — это в миксинах, экстендах и т.п. Это как функции в нормальном языке — можно использовать бесконечное количество раз, подключая когда необходимо. Лично я не так часто использую миксины, но т.к. я верстаю с подходом mobile first, мне очень сильно помогает один маленький миксин, о котором я уже упомянул:

Используется достаточно просто, как @media-queries: @include responsive(sm) < background-color: red >и это вместе с вложенностью элементов.

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

«Я не могу разобраться в сгенерированном коде»

Когда я услышал этот аргумент, я не совсем понял, о чем шла речь. Затем мне разъяснили (человек работает на фрилансе) — к нему поступает проект с Sass или Less, но сгенерированный код ужасен, в нем нельзя разобраться. И это неправильный подход, потому что препроцессоры — для людей, для того, чтобы было удобно разрабатывать, держать архитектуру проекта в нормальном состоянии. Если человек пишет нормально, CSS на выходе получается оптимизированным, с этой стороны нет никакой разницы, на чем было написано — на CSS или Sass, Sass лишь помогает разработчику, а не браузеру. Для поддержки браузером есть Source maps, поддержка которых в нормальных инструментах типа Grunt есть из коробки.

Пример

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

Источник

CSS-препроцессоры и преимущество их использования

December 05, 2013

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

Введение

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

Синтаксис

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

Sass & LESS

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

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

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

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

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

Stylus

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

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

Переменные

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

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

Stylus

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

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

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

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

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

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

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

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

Sass, LESS & Stylus

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

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

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

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

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

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

Style

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

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

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

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

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

Sass & Stylus

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Stylus

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

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

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

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

Sass, LESS & Stylus

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

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

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

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

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

Stylus

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

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

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

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

Stylus

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

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

Колонки

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

Stylus

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

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

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

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

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

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

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

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

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

Заключение

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

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

Источник

За что ты послал нам препроцессоры? Чем мы тебя прогневали?

Что такое препроцессоры CSS и зачем они нужны.

В наших проектах в Коде мы используем простой CSS-код. Он компактный и понятный. Но у нас маленькие проекты.

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

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

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

Представьте, что у вас в проекте 30 разных стилей CSS-кнопок. Они нужны для разных дел: одни опасные, другие безопасные, одни активные, другие выключены и т. д. И есть ещё формы ввода и другие интерфейсные элементы, внешний вид которых прописан в CSS.

И вот у всех этих элементов сейчас стоит параметр border-radius: 7px, то есть скругление по углам — семь пикселей. И вдруг приходит дизайнер и говорит: «Всё пропало, ставь скругление 8 пикселей!» Вы терпеливо заходите в CSS-файл и в 30 местах меняете 7px на 8px.

Приходит дизайнер и говорит: «Миша, всё ерунда, давай по новой. Теперь 6 пикселей». Можно запустить в дизайнера стулом, а можно использовать препроцессор.

С препроцессором у вас 30 кнопок, в которых будет вот так:

border-radius: $defaultBorderRadius

А где-то в отдельном месте документа будет один раз написано:

$defaultBorderRadius: 7px;

И когда дизайнер придёт менять скругление на кнопках, вы измените его один раз, в одном месте, не нанося телесные повреждения дизайнеру.

Какие бывают препроцессоры CSS

Sass. Появился в 2006 году как способ упростить работу с CSS и сразу стал популярен у разработчиков. Некоторые считают, что у Sass невысокая скорость работы, но на практике это можно заметить только на очень больших проектах.

Любопытно, что у Sass есть два синтаксиса:

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

Stylus и другие. Есть и другие препроцессоры — например, тот же Stylus. Принципиально он делает то же самое, но использует другой синтаксис, более лаконичный и простой.

Какой выбрать?

По сути все они делают одно и то же: упрощают работу с CSS-кодом, поэтому это вопрос вкуса и привычек. Если давать общие рекомендации, мы бы сделали так:

Когда использовать препроцессоры

Если у вас CSS-код занимает не больше одной-двух страниц, нет смысла использовать препроцессоры: настройка и описание кода займёт больше времени, чем сразу написать то, что нужно. А вот если у вас большой сайт с разным дизайном на странице или очень сложная CSS-вёрстка, то тут уже пригодятся препроцессоры.

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

Переменные. Если вы используете один и тот же фирменный цвет для ссылок, рамок вокруг картинок, то можно задать этот цвет в одном месте, а потом обращаться к нему откуда угодно. Зададим переменными ширину и цвет элемента:

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

Миксины. Это то же самое, что обычные функции в программировании. Их можно вызывать сколько угодно раз с любыми параметрами. Новый параметр — новый результат работы миксина. Ими удобно оформлять повторяющиеся куски кода в разных местах.

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

@mixin good-text <
font: <
family: Arial;
size: 20px;
weight: bold;
>
>
.page-text <
@include good-text;
color: #000000;
>
.menu-text <
@include good-text;
color: #ff0000;
>
.tip-text <
@include good-text;
color: #ffffff;
background-color: #000000;
>

.page-text <
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #000000;
>
.menu-text <
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ff0000;
>
.tip-text <
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ffffff;
background-color: #000000;
>

Чем больше однотипного кода используется в CSS-файле, тем проще из этого сделать один миксин.

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

Преимущества и недостатки препроцессоров

Так как все CSS-препроцессоры делают примерно одно и то же, только немного разными способами, то сильные и слабые стороны у них будут одни и те же:

✅ Хорошо подходят для больших проектов.

✅ Сильно расширяют возможности обычного CSS.

✅ Упрощают работу с однотипным кодом.

✅ Проще вносить изменения и поддерживать код в актуальном состоянии.

✅ Сразу видна логическая структура CSS, легко разобраться в том, из чего состоит каждый элемент.

❌ Нет смысла использовать в маленьких проектах и простых страницах.

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

❌ Нужно изучать что-то кроме самого CSS.

❌ У каждого препроцессора свой синтаксис, и не получится быстро перейти от одного к другому.

С чего начать

Sass → почитайте sass-scss.ru, там есть всё, что нужно знать для работы с этим препроцессором. Документация настолько подробная, что её можно освоить вообще без опыта работы с таким инструментом.

LESS → Путеводитель для новичков по CSS-препроцессору Less. Просто, доходчиво и с кучей примеров для каждой команды.

Stylus → если знаете английский, почитайте официальный сайт проекта. Если не знаете — почитайте краткое руководство по использованию и опыт разработчиков Яндекс.Почты.

Источник