CSS препроцессор (CSS preprocessor) – это надстройка над CSS, которая предоставляет новые функции и возможности для CSS, с помощью добавленных синтаксических конструкций.
Цель препроцессоров : предоставление удобных синтаксических конструкций для веб-разработчика, чтобы упростить и ускорить разработку и поддержку стилей в проектах.
CSS препроцессоры делают код, написанный с использованием препроцессорного языка,чистым и валидным.
При помощи препроцессоров Ваш написанный код становится: читабельным для человека, структурированным и логичным, производительным.
Среди наиболее популярных препроцессоров выделяют Less, Sass (Scss), Stylus . Также более менее заметными инструментами в данной области являются Closure Stylesheets, CSS Crush, они менее популярны на данный момент, но все таки ими пользуются некоторые разработчики. Попробуем разобраться в возможностях и особенностях Less, Sass (Scss), Stylus.
Стандартное использование CSS довольно сложное. Синтаксис без вложенности напрямую сложен для зрительного восприятия. Отсутствие нормальных переменных и функций делает CSS-код узконаправленным и с многими лишними и не нужными деталями.
Доступная документация – сейчас любой желающий может за короткое время освоить выбранный препроцессор, без лишних затрат. Второе преимущество простота использования препроцессоров. Для этого нужно лишь установить специальную программу, которая будет следить за файлами, предназначенными для препроцессора, и при их изменении будет компилировать содержимое этих файлов в чистый CSS-код.
Для более продвинутых пользователей есть специальные сборщики проектов.
Less – наиболее популярный и часто используемый препроцессор. Разработан на основе JavaScript, включает базовые возможности препроцессоров, но не предоставляет условных конструкций и циклов в привычном для нас понимании. Благодаря своей простоте и лаконичности имеется стандартный для CSS синтаксис и возможность расширения функционала за счёт функционирования плагинов.
LESS предоставляет для CSS динамические возможности: переменные, примешивания (Mixins), операции и функции. Документация очень дружелюбная для разработчика, а синтаксис очень схож с чистым CSS. Популярные фреймворки, например, Twitter Bootstrap, активно используют динамические функции LESS. Однако LESS дает возможность повторно использовать классы в качестве примешиваний в любом месте таблицы стилей.
Другой мощный и популярный препроцессор – Sass . Вокруг данного инструмента образовалось огромное сообщество разработчиков. Он основан в 2007 году как модуль для HAML и написан на Ruby (предоставляет порт на C++). Имеет широкий ассортимент функций, если сравнивать с Less. Препроцессор расширяет свою функциональность за счёт библиотеки Compass, которая дает возможность выйти за рамки CSS и работать более масштабно. Предоставляет два вида синтаксиса: Sass (Syntactically Awesome Style Sheets) более простой синтаксис CSS, в основе которого идентация. Его считают более устаревшей версией. Scss (Sassy CSS) в основе которого стандартный для CSS синтаксис.
– довольно молодой, но уже перспективный CSS-препроцессор. Разработан еще в 2010 году. Многие считают его удобным и расширяемым препроцессор, и более гибким чем Sass. Разработан на JavaScript. Есть поддержка многих вариантов синтаксиса от подобного CSS до более простого и легкого.
Полезные инструменты для разработчика:
Для того, чтобы выбрать по.дходящий препроцессор для своей работы, попробуйте воспользоваться несколькими. А по результатам теста, Вам будет намного легче сделать свой выбор. А также не забывайте о том, что при освоении препроцессора, Вы не изучаете новый язык, а только лишь изучаете новый синтаксис и возможности. Компания ™ желает Вам приятной работы в мире CSS!
2545 раз(а) 1 Сегодня просмотрено раз(а)
И когда же наконец-то эти разработчики успокоятся и перестанут издеваться над новичками!? Не успел я ещё до конца разобраться с CSS , а мне говорят: "Все настоящие верстальщики уже давно перешли на препроцессоры. Ну какой чистый CSS в преддверии 2020 года!?" Что же делать?
Во-первых, разработчики никогда не перестанут придумывать новые технологии. А профессиональные верстальщики – премного им за это благодарны. Язык таблиц стилей CSS , придумали в то время, когда сайты были примитивными. Но шли годы, сайты становились сложнее и массивнее, но способы верстки оставались прежними. Верстальщики запарились писать похожие участки кода. Невозможно было быстро поменять цвет на сайте. Назрела необходимость в большей автоматизации верстки, так и появились препроцессоры CSS кода. И сегодня мы поговорим об одном из них, препроцессоре LESS .
Все что потребуется для компиляции LESS кода – это редактор кода VS Code и расширение Easy Less . Как это работает?
Каждый раз при сохранении изменений, LESS файлы компилируются в CSS файлы. Браузеры ещё не научились понимать LESS , им нужен CSS код.
Наиболее часто используемые свойства выносим в переменные. На сайте обычно используются повторяющиеся цвета и семейства шрифтов. Заносим все цвета в переменные и затем подставляем в правило не код цвета, а переменную. Вы спросите: "В чем прикол? Все равно мне нужно что-то прописывать, какая разница?"
Главная фишка - это быстрая замена цвета. Цвет меняется только один раз, в переменной. Замена цвета в одной переменной, заменит цвет на всех страницах сайта. Только одной этой фишки уже достаточно, чтобы начать использовать LESS . Объявляем переменные в LESS и сохраняем в них нужные нам значения, названия переменных даем осмысленные.
@primary: #194eb4;
@secondary: #f2b834;
@success: #4cb514;
@black: #000;
@white: #fff;
Теперь пишем обычный код, как мы это делали в CSS , но вместо значений подставляем переменные.
После сохранения, компилируется CSS код. Мы не трогаем вообще CSS файл, вся работа ведется в LESS файле. Вы можете заносить любые часто повторяющиеся свойства в переменные.
Миксины полезны для повторного использования набора свойств – рамок, кнопок, заголовков. Сгруппированный набор свойств, может применяться к разным селекторам.
На сайте несколько однотипных кнопок разного цвета, но с одинаковыми шрифтовыми свойствами. Создаем миксин, который помогает автоматизировать процесс создания кнопок.
Button_font {
text-transform: uppercase;
font-size: 18px;
}
Примешиваем миксин в свойства селектора кнопки.
Portfolio__button {
padding: 15px 80px;
color: #344258;
.button_font;
}
На выходе получаем:
Portfolio__button {
padding: 15px 80px;
color: #344258;
font-family: "DIN Pro Bold";
text-transform: uppercase;
font-size: 18px;
}
Вместо дублирования названия селектора, используем символ амперсанд.
Portfolio__item {
position: relative;
background-color: #3c3c3c;
}
&:hover {
background-color: #ccc;
}
}
Можно записывать медиа-запросы прямо внутри селектора.
Эта статья не раскрывает и 25% всех возможностей, что предлагает LESS . Да это и не нужно, цель статьи – мотивация новичков начать использовать препроцессоры. Начиная с самого простого, постепенно двигаясь к более сложному.
Статья на NetTuts+, написанная Johnathan Croom в 2012 году.
Основная цель статьи - показать преимущество использования любого из трех описанных в ней препроцессоров Sass, LESS и Stylus. Обзор прекрасно подойдет для новичков, которые только открывают для себя эту грань веб-дизайна.
В этой статье мы рассмотрим преимущества и выгоды использования трех различных препроцессоров - Sass , LESS и Stylus .
Препроцессоры CSS были созданы с одной единственной целью - добавить стилевым таблицам CSS мощь и одновременную гибкость без нарушения кросс-браузерности. Все препроцессоры компилируют созданный с помощью их синтаксиса код в стандартный CSS-код, который понимает и использует любой браузер, каким бы древним он (браузер ) не был.
Существуют множество преимуществ, которые привносят препроцессоры в таблицы стилей CSS и в этой статье мы рассмотрим только некоторые из них, как хорошо известные, так и мало распространенные. Давайте приступим к обзору.
Наиболее важной частью при написании кода в любом препроцессоре CSS является его синтаксис. В счастью для нас, синтаксис всех трех препроцессоров, которые мы будем рассматривать, имеют CSS-подобный вид.
Оба препроцессора Sass и LESS имеют стандартный CSS-синтаксис. Это делает задачу конвертирования уже существующего CSS-кода в синтаксис любого из этих препроцессоров простой и быстрой. Sass использует для своих файлов расширение
| 1 | .scss |
| 1 | .less |
Вид обычного файла в синтаксисе Sass или LESS представлен ниже:
/* style.scss или style.less */ h1 { color : #0982c1 ; }Хорошо видно, что это обычный синтаксис CSS, который прекрасно конвертируется в Sass (SCSS) или LESS.
Важно обратить внимание, что Sass (SCSS) также имеет старую версию синтаксиса Sass, в которой опущены точки с запятой и фигурные скобки.
Несмотря на то, что такой синтаксис все еще можно применять на практике, он является устаревшим и мы не будем использовать его в наших примерах.
Синтаксис Sass (старая версия ) выглядит следующим образом:
/* style.sass */ h1 color : 0982c1Для своих файлов этот препроцессор использует расширение
| 1 | .styl |
Примеры синтаксиса Stylus:
/* CSS-подобный синтаксис */ h1 { color : #0982C1 ; } /* опущены фигурные скобки */ h1 color : #0982C1 ; /* опущены фигурные скобки, двоеточия и точки с запятой */ h1 color #0982C1Все варианты синтаксиса, показанные выше, являются валидными и в результате компиляции получается правильный CSS-код. Например, такой код скомпилируется в стандартный CSS без ошибок:
h1 { color #0982c1 } h2 font-size : 1 .2emВ препроцессорах переменные объявляются и используются внутри файлов стилей CSS. Переменные могут принимать любое значение, допустимое в CSS (цвет, число или текст) и может ссылаться из любого места CSS-документа.
В препроцессоре Sass переменная объявляется с помощью символа
| 1 | $ |
Переменные в LESS точно такие же, как и в Sass, за исключением того, что перед именем переменной ставится символ
| 1 | @ |
Переменные в Stylus не нуждаются ни в каком знаке для своего объявления, но, тем не менее, могут использовать символ
, но при вызове этой переменной в коде подстановки значения переменной не происходит.Другими словами, не выполняется такая операция:
mainColor = #0982c1 siteWidth = 1024px $ borderStyle = dotted body color mainColor border 1px $ borderStyle mainColor max-width siteWidthКаждый из представленных в виде примера файлов компилируется в точно такой же CSS-код. Вы можете включить воображение, чтобы представить, насколько полезными могут быть переменные.
Благодаря им отпадает необходимость задавать значение цвета и потом двадцать раз повторять его в CSS-коде. Или же поставлена задача изменить ширину сайта и для этого необходимо “перерыть” код в поисках этой величины.
Ниже представлен CSS-код после выполнения компиляции:
body { color : #0982c1 ; border : 1px dotted #0982c1 ; max-width : 1024px ; }Если в коде CSS поставлена задача обратиться одновременно к нескольким элементам, имеющим одного и того же родителя, то писать снова и снова этого родителя - занятие утомительное.
Например, так:
Вместо этого, используя возможности препроцессора, мы можем поместить все дочерние селекторы внутри скобок элемента-родителя. Кроме того, символ
| 1 | & |
Все три препроцессора имеют абсолютно одинаковый синтаксис для вложенных селекторов:
section { margin : 10px ; nav { height : 25px ; a { color : #0982C1 ; &:hover { text-decoration : underline ; } } } }Ниже показан скомпилированный в CSS результат кода, представленного выше. Сравните с тем кодом, который мы писали в самом начале - абсолютно одинаково. Но какое удобство при использовании преимуществ препроцессора!
section { margin : 10px ; } section nav { height : 25px ; } section nav a { color : #0982C1 ; } section nav a :hover { text-decoration : underline ; }| 1 | mixins |
Применение подмешиваний особенно оправдывает себя при создании специфичных стилей для элементов или простановке браузерных префиксов. Когда миксин вызывается внутри CSS-селектора, происходит распознавание аргументов этого миксина, затем его стили применяются к селектору, который его вызвал.
Прим. переводчика: в приведенных ниже примерах стоит обратить внимание на разницу в синтаксисе объявления и вызова миксина внутри CSS-селектора для всех трех препроцессоров.
Результатом компиляции из всех трех препроцессоров будет одинаковый CSS-код:
.generic-error { padding : 20px ; margin : 4px ; border : 2px solid #f00 ; color : #f00 ; } .login-error { left : 12px ; position : absolute ; top : 20px ; border : 5px solid #f00 ; color : #f00 ; }При написании CSS стилей “классическим” способом, для того чтобы применить одни и те же свойства к нескольким элементам в HTML-документе, нам следовало бы создать такой код:
p , ul , ol { /* какие-то стили здесь */ }Все работает прекрасно. Но если потребуется написать стили отдельно для любого из этих селекторов, нужно будет создавать отдельные правила для каждого из них. И сразу же код таблиц стилей становиться неряшливым и трудно поддерживаемым.
В противоположность этому применяются наследование. Наследование - это возможность для одних CSS-селекторов наследовать свойства у другого селектора.
Прим. переводчика: обратите внимание на одинаковый синтаксис подключения (объявления) наследования внутри CSS-селектора с помощью директивы
.
1 @extend
Препроцессор LESS не поддерживает наследование в полной мере так, как это организовано в Sass или Stylus. Вместо добавления множественных селекторов в один набор свойств, наследование трактуется как миксин без аргументов.
Импорт стилей выполняется для каждого селектора. Обратной стороной такого подхода является постоянное повторение строк со свойствами в компилированном CSS-стиле.
Вот как может выглядеть LESS-код с наследованием:
.block { margin : 10px 5px ; padding : 2px ; } p { .block; border : 1px solid #EEE ; } ul , ol { .block; /* Наследование свойств у селектора класса.block */ color : #333 ; text-transform : uppercase ; }Как хорошо видно из кода, стили класса
.В CSS-сообществе к импортированию стилей с помощью директивы
| 1 | @import |
В любом из трех препроцессоров импортирование одного файла внутрь другого фактически приводит к вставке кода одного файла в другой при компиляции, в результате которой получается один CSS-файл.
Прим. переводчика: другими словами, в препроцессорах импортирование необходимо для компиляции одного файла из нескольких. В стандартном CSS импортирование приводит к подстановке одного кода внутрь другого.
Обратите внимание, что при компилировании файла со стандартным подключением с помощью директивы
| 1 | @import "file.css" |
“Цветовые” функции созданы для трансформации цвета при компиляции. Такие функции чрезвычайно полезны при создании градиентов, затемнения цвета при
| 1 | hover |
Представленный выше код является всего лишь кратким списком функций работы с цветом в Sass. Полный список всех доступных функций расположен по адресу Sass Documentation .
“Цветовые” функции могут использоваться везде, где требуется работа с цветов в коде. Простой пример - объявлена переменная с цветом, к которой дальше в коде применяется функция затемнения цвета
| 1 | darken |
Список функций препроцессора LESS находится на официальном сайте проекта LESS Documentation .
Ниже показан пример того, как можно применять “цветовые” функции в LESS:
@color : #0982C1 ; h1 { background : @ color ; border : 3px solid darken (@ color , 50% ); }Полный список всех функций работы с цветом препроцессора Stylus представлен на сайте проекта Stylus Documentation .
И пример использования “цветовой” функции в Stylus:
color = #0982C1 h1 background color border 3px solid darken (color , 50 %)Благодаря препроцессорам выполнение арифметических операций внутри CSS-кода теперь осуществляется просто и легко. Такая возможность часто бывает полезной.
Прим. переводчика: стоит упомянуть о функции из CSS3 по имени
, которая также позволяет выполнять внутри CSS-кода простые арифметические операции.
1 calc()
Вот мы и рассмотрели основные моменты того, что и как умеют делать все три препроцессора. Однако мы еще ни разу не коснулись момента практического применения этих возможностей. Ниже показан список реальных веб-приложений, в которых используются препроцессоры, заметно улучшая при этом весь код.
Одним из наиболее ярких примеров преимущества использования препроцессоров является написание с их помощью свойств с браузерными префиксами. Один раз создав миксин с поддержкой браузерных префиксов, мы избавляем себя от рутинной работы.
Например, создадим для всех трех препроцессоров миксин скругления углов блока:
Создание эффекта трехмерности для текста с помощью CSS-свойства
| 1 | text-shadow |
Используя миксины и функции для работы с цветом, мы можем создать объемный текст и изменять его цвет на лету:
В примере для Stylus я выбрал вариант написания свойства
| 1 | text-shadow |
Использование переменных и числовых значений для этих переменных пришла мне в голову, когда я только начал знакомиться с возможностями CSS-препроцессоров. Объявление ширины для макета внутри переменной делает задачу изменения этой ширины (при необходимости ) простой и быстрой:
Существует несколько хитростей при работе с CSS-препроцессорами. В этой статье я расскажу только о некоторой части из них. Но если эта тема вас заинтересовала, я рекомендую вам внимательно прочитать официальную документацию или же, что еще лучше, просто начните пользоваться препроцессором каждый день в процессе кодинга.
Если вы уже пишите код на CSS достаточно давно, то наверняка сталкивались с ситуацией, когда внутри кода закралась ошибка, которую вы никак не можете найти. Если вы попадали в точно такую же ситуацию, то могу вас обрадовать - существует способ решить такую задачу.
CSS-препроцессоры могут сообщать об ошибках в коде и заставить их поступать таким образом достаточно просто. В этом случае препроцессор сам сообщает вам, в каком месте CSS-кода находиться ошибка (и все счастливы ).
Если вас заинтересовала подобная возможность во всех трех препроцессорах, то в этой статье подробно описано, как выполнить данную настройку.
Появились вопросы?
Воплощение дизайнерского макета невозможно без использования HTML и CSS. Если язык разметки позволяет нам набросать шаблон из необходимых элементов, то CSS преобразует этот шаблон к нужному виду, как на исходнике. Казалось бы, с помощью чистого CSS можно сделать страницу такой, какой хотел видеть её заказчик.
Однако, если кто-то откроет ваш единственный CSS-файл и попытается что-то подправить, уверены ли вы, что код будет читаемым, редактируемым, структурированным и понятным? Если ваш проект огромен, состоит из множества частей, то уверены ли вы, что сможете с легкостью поддерживать его в будущем? Если использовать CSS-препроцессор, то ответ - да, к тому же это путь автоматизации верстки сайтов . Почему? Сейчас узнаем.
В моем понимании, это надстройка над стандартным CSS, которая расширяет стандартные возможности, добавляет некоторые функции и позволяет писать более читаемый и удобный для понимания код. На выходе исходный код компилируется в привычный нам CSS. Использование подобного инструмента в современной разработке - “must have”, и я советую каждому верстальщику или разработчику ознакомиться с ним. Следует добавить, что есть с чего выбирать, ведь существует достаточно много CSS-препроцессоров, но следует выделить самые популярные:
Все вышеперечисленные препроцессоры имеют практически идентичный функционал, есть только небольшие различия в синтаксисе. Теперь, вернемся же к вопросу, озвученному ранее: какие преимущества дают нам препроцессоры, для того чтобы сделать наш код более удобным, и поддерживаемым? Это, прежде всего, вложенность. Такая особенность дает нам возможность структурировать элементы, с легкостью найти родителя элемента, быстро писать псевдоклассы и псевдоэлементы и даже использовать БЭМ! К примеру:
.track
color: #fff
&__title
paddding: 10px
&:hover, &:focus
color: blue
Посмотрите на этот фрагмент кода, написанный на Sass. Всё это преобразуется в следующий CSS:
Track { color: #FFF;}
.track__title { padding: 10px;}
.track__title:hover, .track-title:focus { color: blue}
Лаконично, удобно, понятно, структура от родителя до потомка - здорово, не так ли? Вторым, и не менее важным, преимуществом, являются переменные. Принцип работы их предельно прост: имя переменной начинается с символа $ , а дальше само имя. Через двоеточие пишем значение - это может быть цвет в любом удобном виде, значения отступа, ширины, размера шрифта и так далее. В итоге мы получим примерно следующее:
$btn-color: blue;
$font-main-size: 16px;
А использование будет выглядеть следующим образом:
Block {
font-size: $font-main-size;
}
Только представьте себе, как это удобно. Если вам нужно поменять цвет кнопок по всему сайту, то это достаточно сделать только в одном месте! Что же, идем дальше. Третье, и самое большое, что может нам предложить CSS-препроцессоров - это использования миксинов. В привычном для нас понимании, миксины - это функции, которые можно использовать несколько раз, не повторяя одни и те же части кода (помним об одном из принципов программирования - DRY - Don’t repeat yourself). Признаться честно, я не так часто использую миксины, видимо не было такой острой необходимости, однако несколько примеров я всё же покажу. Одна из самых используемых мной функций имеет следующий вид:
@function em($pixels, $context: $browser-context) {
@if (unitless($pixels)) {
$pixels: $pixels * 1px;
}
@if (unitless($context)) {
$context: $context * 1px;
}
@return $pixels / $context * 1em;
}
А её применение имеет следующий вид:
body {
font-size: em(14px);
}
Да, как вы поняли, это всего лишь преобразование размера шрифта из PX в Em (да здравствует те времена, когда для такой мелочи раньше пользовались специальным сервисами или считали сами на калькуляторе). Следующий пример также позволяет сэкономить много времени:
@mixin input-placeholder {
&.placeholder { @content; }
&:-moz-placeholder { @content; }
&::-moz-placeholder { @content; }
&:-ms-input-placeholder { @content; }
&::-webkit-input-placeholder { @content; }
}
Его использования:
input, textarea {
@include input-placeholder {
color: $grey;
}
}
Можно привести ещё множество примеров, однако, стоит начать использовать миксины самому, чтобы понять, насколько это полезный инструмент. Пожалуй, осталось ещё одна причина, которая заставит вас полюбить CSS-препроцессоры, и её имя - модульность. На дворе 2018 год, и модульность у нас повсюду - начиная от HTML-шаблонизаторов и заканчивая различными css фреймворками и сборщиками проектов.
26.07.2017
5 Лучших CSS препроцессоров 2017 года, которые ускорят ваш рабочий процесс.
CSS препроцессоры разработаны специально для того, чтобы сделать работу CSS программистов более увлекательной. Они позволяют писать легко редактируемыый и надежный код с возможностью многократного использования.
Иными словами, CSS препроцессор - это дополнение к CSS с новыми функциями: переменными, расширениями, импортом и так далее.
В той статье я расскажу о лучших 5 CSS препроцессорах 2017 года.
SASS – это самый популярный препроцессор с огромным сообществом и мощным функционалом. Он работает только в совокупности с Ruby и очень прост в изучении. Большинство front-end фреймворков, таких как Bootstrap, Foundation и materialize, построены с использованием SASS.
SASS имеет два синтаксиса:
Stylus – еще один отличный препроцессор для динамичного генерирования CSS. Если вы хотите опустить фигурные скобки, запятые и точки с запятой, то он может стать для вас лучшим выбором. Stylus работает на Node.js и очень прост в установке и использовании. В нем есть множество кастомных функций, например, saturation(). Вы также можете использовать все функции, предоставляемые другими лидирующими компиляторами.
Less, который также известен как Less.js или Less CSS, – еще один лидирующий CSS препроцессор. Это отличный выбор, если вам нужны такие стандартные функции как переменные, вложенные стили и так далее. Эта Javascript библиотека была изначально написана на Ruby.
Stylecow – препроцессор, написанный на Node, который можно установить с помощью npm. У него мощный API, с помощью которого можно легко создавать плагины.
Препроцессор, построенный на PHP, который станет отличным вариантом для PHP-программистов, потому что он работает на многих платформах. CSS-Crush обладает всеми обычными функциями препроцессора (переменные, вложенные стили и т.д.)
Если вы ищете лучший CSS препроцессор, то вы найдете великое множество различных вариантов в сети. На мой взгляд, наилучшие варианты для новичков – это SASS и Stylus.
