И когда же наконец-то эти разработчики успокоятся и перестанут издеваться над новичками!? Не успел я ещё до конца разобраться с CSS , а мне говорят: "Все настоящие верстальщики уже давно перешли на препроцессоры. Ну какой чистый CSS в преддверии 2020 года!?" Что же делать?
Во-первых, разработчики никогда не перестанут придумывать новые технологии. А профессиональные верстальщики – премного им за это благодарны. Язык таблиц стилей CSS , придумали в то время, когда сайты были примитивными. Но шли годы, сайты становились сложнее и массивнее, но способы верстки оставались прежними. Верстальщики запарились писать похожие участки кода. Невозможно было быстро поменять цвет на сайте. Назрела необходимость в большей автоматизации верстки, так и появились препроцессоры CSS кода. И сегодня мы поговорим об одном из них, препроцессоре LESS .
Компиляция LESS и VS Code
Все что потребуется для компиляции LESS кода – это редактор кода VS Code и расширение Easy Less . Как это работает?
- Создаем файл стилей c расширением .less
- После сохранения, автоматически сгенерируется .css файл в ту же папку.
Каждый раз при сохранении изменений, LESS файлы компилируются в CSS файлы. Браузеры ещё не научились понимать LESS , им нужен CSS код.
Переменные LESS
Наиболее часто используемые свойства выносим в переменные. На сайте обычно используются повторяющиеся цвета и семейства шрифтов. Заносим все цвета в переменные и затем подставляем в правило не код цвета, а переменную. Вы спросите: "В чем прикол? Все равно мне нужно что-то прописывать, какая разница?"
Главная фишка - это быстрая замена цвета. Цвет меняется только один раз, в переменной. Замена цвета в одной переменной, заменит цвет на всех страницах сайта. Только одной этой фишки уже достаточно, чтобы начать использовать LESS . Объявляем переменные в LESS и сохраняем в них нужные нам значения, названия переменных даем осмысленные.
@primary: #194eb4;
@secondary: #f2b834;
@success: #4cb514;
@black: #000;
@white: #fff;
Теперь пишем обычный код, как мы это делали в CSS , но вместо значений подставляем переменные.
LESS
div {padding: 0;
color: @black;
}
После сохранения, компилируется CSS код. Мы не трогаем вообще CSS файл, вся работа ведется в LESS файле. Вы можете заносить любые часто повторяющиеся свойства в переменные.
CSS
div {padding: 0;
font-family: Roboto, sans-serif;
color: #000;
}
Миксины (mixin) в 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;
}
}
CSS
.portfolio__item {position: relative;
background-color: #3c3c3c;
}
.portfolio__item:hover {
background-color: #ccc;
}
Медиа-запросы в LESS
Можно записывать медиа-запросы прямо внутри селектора.
LESS
.header__title {color: #344258;
font-size: 40px;
padding: 0 20px;
@media only screen and (max-width: 320px){
font-size: 22px;
}
}
CSS
.header__title {color: #344258;
font-size: 40px;
font-family: "DIN Pro", sans-serif;
padding: 0 20px;
}
@media only screen and (max-width: 320px) {
.header__title {
font-size: 22px;
}
}
Заключение
Эта статья не раскрывает и 25% всех возможностей, что предлагает LESS . Да это и не нужно, цель статьи – мотивация новичков начать использовать препроцессоры. Начиная с самого простого, постепенно двигаясь к более сложному.
26.07.2017
5 Лучших CSS препроцессоров 2017 года, которые ускорят ваш рабочий процесс.
CSS препроцессоры разработаны специально для того, чтобы сделать работу CSS программистов более увлекательной. Они позволяют писать легко редактируемыый и надежный код с возможностью многократного использования.
Иными словами, CSS препроцессор - это дополнение к CSS с новыми функциями: переменными, расширениями, импортом и так далее.
В той статье я расскажу о лучших 5 CSS препроцессорах 2017 года.
01. Sass
SASS – это самый популярный препроцессор с огромным сообществом и мощным функционалом. Он работает только в совокупности с Ruby и очень прост в изучении. Большинство front-end фреймворков, таких как Bootstrap, Foundation и materialize, построены с использованием SASS.
SASS имеет два синтаксиса:
- .sass
- .scss
02. Stylus
Stylus – еще один отличный препроцессор для динамичного генерирования CSS. Если вы хотите опустить фигурные скобки, запятые и точки с запятой, то он может стать для вас лучшим выбором. Stylus работает на Node.js и очень прост в установке и использовании. В нем есть множество кастомных функций, например, saturation(). Вы также можете использовать все функции, предоставляемые другими лидирующими компиляторами.
03. Less
Less, который также известен как Less.js или Less CSS, – еще один лидирующий CSS препроцессор. Это отличный выбор, если вам нужны такие стандартные функции как переменные, вложенные стили и так далее. Эта Javascript библиотека была изначально написана на Ruby.
- Читайте также:
04. Stylecow
Stylecow – препроцессор, написанный на Node, который можно установить с помощью npm. У него мощный API, с помощью которого можно легко создавать плагины.
05. CSS-Crush
Препроцессор, построенный на PHP, который станет отличным вариантом для PHP-программистов, потому что он работает на многих платформах. CSS-Crush обладает всеми обычными функциями препроцессора (переменные, вложенные стили и т.д.)
Заключение
Если вы ищете лучший CSS препроцессор, то вы найдете великое множество различных вариантов в сети. На мой взгляд, наилучшие варианты для новичков – это SASS и Stylus.
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 до более простого и легкого.
Полезные инструменты для разработчика:
- CodeKit : делает компиляцию Sass, LESS и Stylus файлов, а затем автоматически перегружает ваш веб-браузер, после обновления файлов. В том числе оптимизирует изображения проекта для того, чтобы повысить производительность системы. Технология платна, но есть и триальная версия для работы.
- LiveReload : делает проверку изменений в файлах, потом обрабатывает их и автоматически перезагружает веб-браузер. Версия работает для Mac и Windows.
- Scout : Работает с Sass и Compass в среде Ruby. Работает для Mac и Windows.
- SimpLESS : обычный и простой LESS CSS компилятор для Mac и Windows.
Для того, чтобы выбрать по.дходящий препроцессор для своей работы, попробуйте воспользоваться несколькими. А по результатам теста, Вам будет намного легче сделать свой выбор. А также не забывайте о том, что при освоении препроцессора, Вы не изучаете новый язык, а только лишь изучаете новый синтаксис и возможности. Компания ™ желает Вам приятной работы в мире CSS!
2545 раз(а) 1 Сегодня просмотрено раз(а)
Появились вопросы?
Воплощение дизайнерского макета невозможно без использования HTML и CSS. Если язык разметки позволяет нам набросать шаблон из необходимых элементов, то CSS преобразует этот шаблон к нужному виду, как на исходнике. Казалось бы, с помощью чистого CSS можно сделать страницу такой, какой хотел видеть её заказчик.
Однако, если кто-то откроет ваш единственный CSS-файл и попытается что-то подправить, уверены ли вы, что код будет читаемым, редактируемым, структурированным и понятным? Если ваш проект огромен, состоит из множества частей, то уверены ли вы, что сможете с легкостью поддерживать его в будущем? Если использовать CSS-препроцессор, то ответ - да, к тому же это путь автоматизации верстки сайтов . Почему? Сейчас узнаем.
Что такое CSS-препроцессор?
В моем понимании, это надстройка над стандартным CSS, которая расширяет стандартные возможности, добавляет некоторые функции и позволяет писать более читаемый и удобный для понимания код. На выходе исходный код компилируется в привычный нам CSS. Использование подобного инструмента в современной разработке - “must have”, и я советую каждому верстальщику или разработчику ознакомиться с ним. Следует добавить, что есть с чего выбирать, ведь существует достаточно много CSS-препроцессоров, но следует выделить самые популярные:
- Stylus
Все вышеперечисленные препроцессоры имеют практически идентичный функционал, есть только небольшие различия в синтаксисе. Теперь, вернемся же к вопросу, озвученному ранее: какие преимущества дают нам препроцессоры, для того чтобы сделать наш код более удобным, и поддерживаемым? Это, прежде всего, вложенность. Такая особенность дает нам возможность структурировать элементы, с легкостью найти родителя элемента, быстро писать псевдоклассы и псевдоэлементы и даже использовать БЭМ! К примеру:
.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 фреймворками и сборщиками проектов.
От автора: о препроцессорах css говорят уже давно. Многие разработчики уже применяют их в разработке своих проектов. Есть и такие, кто слышал о препроцессорах или читал про них, но не понимает, какие преимущества дают препроцессоры при написании css кода.
Для многих препроцессоры – это «секретная» технология, преимущества которой весьма условны и неочевидны. В данной статье я расскажу простым языком о том, что такое препроцессоры, для чего они нужны и как они могут помочь веб-разработчику.
Что это такое CSS препроцессоры?
CSS препроцессор - это надстройка над CSS, которая расширяет возможности для стандартного CSS, с помощью новых синтаксических конструкций.
То есть это не «революционная сверхтехнология». Это то, что расширяет возможности css. Это то, что может автоматизировать рутинные ежедневные операции и ускорить разработку.
Препроцессоры преобразуют код, написанный на препроцессорном языке, в чистый и валидный CSS-код. И на выходе мы получаем чистый, валидный, кроссбраузерный код. Схема работы с препроцессорами можно посмотреть ниже.
Как препроцессоры жизнь упрощают?
Препроцессоры позволяют ускорить написание css-кода и упрощают его поддержку в будущем.
Рассмотрим пример. На сайте используется красный шрифт. Используя чистый css, вам приходится задавать этот цвет много раз для каждого элемента в отдельности. И если вы решите со временем поменять оттенок красного — вам нужно будет его изменять для каждого элемента. Используя препроцессоры, цвет 1 раз присваивается переменной и уже эта переменная прописывается для каждого элемента. Если вы решите поменять оттенок цвета на этот раз, вам нужно будет поменять его только в одном месте.
Подобный пример встречается достаточно часто. И, как я отмечал в начале, преимуществ использования препроцессоров в этом примере не много. В любом редакторе кода мы можем нажать сочетание клавиш «ctrl»+”F”, найти код цвета «#ff0000» и заменить его на «#00ff00». И цвет поменяется с красного на зеленый во всех местах за один клик мыши.
Так в чем же реально нам могут помочь препроцессоры?
Какие проблемы решают препроцессоры?
Препроцессоры экономят наше время и делают многие рутинные вещи за нас благодаря таким особенностям как: вложенные селекторы, математические функции, ссылки на родительский селектор и даже сообщения об ошибках, которые говорят нам, где и почему произошла ошибка в коде.
Давайте посмотрим, как это все нам может помочь на реальных примерах:
В больших или очень старых проектах, которые постоянно дополняются и усовершенствуются, стили css могут изменяться достаточно часто. И если файл стилей содержит тысячи строк кода, то очень неудобно вносить css правки. Было бы гораздо удобнее, если бы стили были разбиты на логические блоки, и каждый такой блок стилей находился бы в отдельном файле.
Эту проблему препроцессоры решают без каких-либо усилий с вашей стороны. У вас может быть несколько препроцессорных файлов от вашего проекта, которые после компиляции автоматически склеятся, и на выходе вы получите один «красивый» css файл.
Еще одной проблемой css является дублирование стилей и селекторов. По мере развития проекта появляются какие-то снипиты, которые можно использовать повторно. Так же может появиться масса однообразных селекторов отличающихся лишь немного. В итоге если мы переместили блок или переименовали класс какого-то блока нужно отредактировать еще массу селекторов.
Данную проблему в препроцессорах решают миксины. Миксины – это параметризованные или нет функции, которые выдают тот или иной CSS, который мы можем многократно использовать там, где нужно.
Следующая проблема – проблема зависимостей. Например, у вас в стилях задана ширина блока, от нее зависят другие параметры, отступы для других блоков и т.д. Для того чтобы корректно поменять один параметр, придутся подправлять все, зависящие от него.
Эту проблему очень просто решают переменные в препроцессорах.
Кроме всего перечисленного при использовании препроцессоров вы полностью исключаете риск получить ошибку в css файле, получаете более чистый, логичный и кроссбраузерный css.
Преимущества препроцессоров
Исходя из трудностей верстки, с которыми помогают справиться препроцессоры можно назвать следующие преимущества препроцессоров: использование переменных, вложенность, миксины (mixins), наследование и так далее, и так далее – это все понятно. Но больше всего я хочу обратить ваше внимание на то, что знания препроцессоров открывают перед вами возможность найти высокооплачиваемую работу, сделать скачок вверх по карьерной лестнице, увеличить ваш заработок минимум в два раза.
Давайте посмотрим, какие зарплаты предлагают веб-студии верстальщикам без знания препроцессоров на сайте hh.ru :
А вот зарплаты, которые предлагают веб-студии верстальщикам со знаниями препроцессоров на том же сайте:
Как вы можете заметить максимальная оплата труда без знаний препроцессоров и минимальная оплата со знаниями препроцессоров, отличаются в 1,5 раза. А если посмотреть по средним цифрам, то оплата отличается минимум в 2 – 3 раза!
Причем, что еще можно заметить, для этого не нужно знать все препроцессоры. Достаточно знать два самых популярных препроцессора – Sass и Less.
Вывод
Препроцессроы действительно упрощают жизнь разработчику, могут решить быстро повседневные проблемы верстальщика и взять на себя выполнение ежедневных рутинных операций.
Лучше знать препроцессоры и ими не каждый день пользоваться, или пользоваться по необходимости. Чем не знать препроцессоры и упустить интересный высокооплачиваемый проект или возможность перейти на более высокооплачиваемую работу.
P.S. Используете ли вы препроцессоры в разработке? Напишите в комментариях, какие препроцесслоры вы используете? Если пока не используете, то почему? Планируете ли начать использовать препроцессоры?
Видео презентация курса «Препроцессоры Sass и Less. Автоматизация и упрощение Front-end разработки»