И когда же наконец-то эти разработчики успокоятся и перестанут издеваться над новичками!? Не успел я ещё до конца разобраться с 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.
Статья на NetTuts+, написанная Johnathan Croom в 2012 году.
Основная цель статьи - показать преимущество использования любого из трех описанных в ней препроцессоров Sass, LESS и Stylus. Обзор прекрасно подойдет для новичков, которые только открывают для себя эту грань веб-дизайна.
В этой статье мы рассмотрим преимущества и выгоды использования трех различных препроцессоров - Sass , LESS и Stylus .
Введение
Препроцессоры CSS были созданы с одной единственной целью - добавить стилевым таблицам CSS мощь и одновременную гибкость без нарушения кросс-браузерности. Все препроцессоры компилируют созданный с помощью их синтаксиса код в стандартный CSS-код, который понимает и использует любой браузер, каким бы древним он (браузер ) не был.
Существуют множество преимуществ, которые привносят препроцессоры в таблицы стилей CSS и в этой статье мы рассмотрим только некоторые из них, как хорошо известные, так и мало распространенные. Давайте приступим к обзору.
Синтаксис
Наиболее важной частью при написании кода в любом препроцессоре CSS является его синтаксис. В счастью для нас, синтаксис всех трех препроцессоров, которые мы будем рассматривать, имеют CSS-подобный вид.
Sass & LESS
Оба препроцессора 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 : 0982c1Stylus
Для своих файлов этот препроцессор использует расширение
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
В препроцессоре Sass переменная объявляется с помощью символа
1 | $ |
LESS
Переменные в LESS точно такие же, как и в Sass, за исключением того, что перед именем переменной ставится символ
1 | @ |
Stylus
Переменные в Stylus не нуждаются ни в каком знаке для своего объявления, но, тем не менее, могут использовать символ
, но при вызове этой переменной в коде подстановки значения переменной не происходит.Другими словами, не выполняется такая операция:
mainColor = #0982c1 siteWidth = 1024px $ borderStyle = dotted body color mainColor border 1px $ borderStyle mainColor max-width siteWidthСкомпилированный CSS
Каждый из представленных в виде примера файлов компилируется в точно такой же CSS-код. Вы можете включить воображение, чтобы представить, насколько полезными могут быть переменные.
Благодаря им отпадает необходимость задавать значение цвета и потом двадцать раз повторять его в CSS-коде. Или же поставлена задача изменить ширину сайта и для этого необходимо “перерыть” код в поисках этой величины.
Ниже представлен CSS-код после выполнения компиляции:
body { color : #0982c1 ; border : 1px dotted #0982c1 ; max-width : 1024px ; }Вложенность (nesting)
Если в коде CSS поставлена задача обратиться одновременно к нескольким элементам, имеющим одного и того же родителя, то писать снова и снова этого родителя - занятие утомительное.
Например, так:
Вместо этого, используя возможности препроцессора, мы можем поместить все дочерние селекторы внутри скобок элемента-родителя. Кроме того, символ
1 | & |
Sass, LESS & Stylus
Все три препроцессора имеют абсолютно одинаковый синтаксис для вложенных селекторов:
section { margin : 10px ; nav { height : 25px ; a { color : #0982C1 ; &:hover { text-decoration : underline ; } } } }Скомпилированный CSS
Ниже показан скомпилированный в CSS результат кода, представленного выше. Сравните с тем кодом, который мы писали в самом начале - абсолютно одинаково. Но какое удобство при использовании преимуществ препроцессора!
section { margin : 10px ; } section nav { height : 25px ; } section nav a { color : #0982C1 ; } section nav a :hover { text-decoration : underline ; }Подмешивания (mixins)
1 | mixins |
Применение подмешиваний особенно оправдывает себя при создании специфичных стилей для элементов или простановке браузерных префиксов. Когда миксин вызывается внутри CSS-селектора, происходит распознавание аргументов этого миксина, затем его стили применяются к селектору, который его вызвал.
Прим. переводчика: в приведенных ниже примерах стоит обратить внимание на разницу в синтаксисе объявления и вызова миксина внутри CSS-селектора для всех трех препроцессоров.
Sass
/* Sass mixin по имени error с аргументом $borderWidth, значение которого по умолчанию равно 2px */ @mixin error ($ borderWidth : 2px ) { border : $ borderWidth solid #F00 ; color : #F00 ; } .generic-error { padding : 20px ; margin : 4px ; @include error(); } .login-error { left : 12px ; position : absolute ; top : 20px ; @include error(5px); }LESS
/* LESS mixin по имени error с аргументом $borderWidth, значение которого по умолчанию равно 2px */ .error (@borderWidth : 2px ) { border : @ borderWidth solid #F00 ; color : #F00 ; } .generic-error { padding : 20px ; margin : 4px ; .error(); /* Подключается миксин по имени error */ } .login-error { left : 12px ; position : absolute ; top : 20px ; .error(5px); /* Подключается миксин по имени error со значением аргумента $borderWidth, равным 5px; то есть происходит переопределение значения аргумента */ }Style
/* Stylus mixin по имени error с аргументом $borderWidth, значение которого по умолчанию равно 2px */ error (borderWidth = 2px ) { border : borderWidth solid #F00 ; color : #F00 ; } .generic-error { padding : 20px ; margin : 4px ; error(); /* Подключается миксин по имени error */ } .login-error { left : 12px ; position : absolute ; top : 20px ; error(5px); /* Подключается миксин по имени error со значением аргумента $borderWidth, равным 5px; то есть происходит переопределение значения аргумента */ }Скомпилированный 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 ; }Наследование (inheritance)
При написании CSS стилей “классическим” способом, для того чтобы применить одни и те же свойства к нескольким элементам в HTML-документе, нам следовало бы создать такой код:
p , ul , ol { /* какие-то стили здесь */ }Все работает прекрасно. Но если потребуется написать стили отдельно для любого из этих селекторов, нужно будет создавать отдельные правила для каждого из них. И сразу же код таблиц стилей становиться неряшливым и трудно поддерживаемым.
В противоположность этому применяются наследование. Наследование - это возможность для одних CSS-селекторов наследовать свойства у другого селектора.
Прим. переводчика: обратите внимание на одинаковый синтаксис подключения (объявления) наследования внутри CSS-селектора с помощью директивы
.
1 @extend
Sass & Stylus
.block { margin : 10px 5px ; padding : 2px ; } p { @extend .block; border : 1px solid #EEE ; } ul , ol { @extend .block; /* Наследовать свойства у селектора класса.block */Скомпилированный CSS
.block , p , ul , ol { margin : 10px 5px ; padding : 2px ; } p { border : 1px solid #EEE ; } ul , ol { color : #333 ; text-transform : uppercase ; }LESS
Препроцессор 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
.block { margin : 10px 5px ; padding : 2px ; } p { margin : 10px 5px ; padding : 2px ; border : 1px solid #EEE ; } ul , ol { margin : 10px 5px ; padding : 2px ; color : #333 ; text-transform : uppercase ; }Как хорошо видно из кода, стили класса
.Импортирование
В CSS-сообществе к импортированию стилей с помощью директивы
1 | @import |
В любом из трех препроцессоров импортирование одного файла внутрь другого фактически приводит к вставке кода одного файла в другой при компиляции, в результате которой получается один CSS-файл.
Прим. переводчика: другими словами, в препроцессорах импортирование необходимо для компиляции одного файла из нескольких. В стандартном CSS импортирование приводит к подстановке одного кода внутрь другого.
Обратите внимание, что при компилировании файла со стандартным подключением с помощью директивы
1 | @import "file.css" |
Скомпилированный CSS
@import "reset.css" ; body { background : #EEE ; } p { background : #0982C1 ; }Функции работы с цветом
“Цветовые” функции созданы для трансформации цвета при компиляции. Такие функции чрезвычайно полезны при создании градиентов, затемнения цвета при
1 | hover |
Sass
lighten ($ color , 10 %); darken ($ color , 10 %); saturate ($ color , 10 %); desaturate ($ color , 10 %); grayscale ($ color ); /* возвращает шкалу полутонов цвета $color */ complement ($ color ); /* returns complement color of $color */ invert ($ color ); /* возвращает инвертированный цвет от $color */ mix ($ color1 , $ color2 , 50 %);Представленный выше код является всего лишь кратким списком функций работы с цветом в Sass. Полный список всех доступных функций расположен по адресу Sass Documentation .
“Цветовые” функции могут использоваться везде, где требуется работа с цветов в коде. Простой пример - объявлена переменная с цветом, к которой дальше в коде применяется функция затемнения цвета
1 | darken |
LESS
lighten (@color , 10% ); /* возвращает цвет на 10% светлее чем $color */ darken (@color , 10% ); /* возвращает цвет на 10% темнее чем $color */ saturate (@color , 10% ); /* возвращает цвет на 10% более насыщенный чем $color */ /* возвращает цвет на 10% менее насыщенный чем $color */ spin (@color , 10 ); /* возвращает цвет, смещенный на 10 градусов вправо относительно цвета @color */ spin (@color , -10 ); /* возвращает цвет, смещенный на 10 градусов влево относительно цвета @color */ mix (@color1 , @ color2 ); /* возвращает результат смешивания цвета $color1 с цветом $color2 */Список функций препроцессора LESS находится на официальном сайте проекта LESS Documentation .
Ниже показан пример того, как можно применять “цветовые” функции в LESS:
@color : #0982C1 ; h1 { background : @ color ; border : 3px solid darken (@ color , 50% ); }Stylus
lighten (@color , 10% ); /* возвращает цвет на 10% светлее чем $color */ darken (@color , 10% ); /* возвращает цвет на 10% темнее чем $color */ saturate (@color , 10% ); /* возвращает цвет на 10% более насыщенный чем $color */ desaturate (@color , 10% ); /* возвращает цвет на 10% менее насыщенный чем $color */Полный список всех функций работы с цветом препроцессора Stylus представлен на сайте проекта Stylus Documentation .
И пример использования “цветовой” функции в Stylus:
color = #0982C1 h1 background color border 3px solid darken (color , 50 %)Арифметические операции
Благодаря препроцессорам выполнение арифметических операций внутри CSS-кода теперь осуществляется просто и легко. Такая возможность часто бывает полезной.
Прим. переводчика: стоит упомянуть о функции из CSS3 по имени
, которая также позволяет выполнять внутри CSS-кода простые арифметические операции.
1 calc()
Sass, LESS & Stylus
body { margin : (14px / 2 ); top : 50px + 100px ; right : 100px - 50px ; left : 10 * 10 ; }Практические примеры
Вот мы и рассмотрели основные моменты того, что и как умеют делать все три препроцессора. Однако мы еще ни разу не коснулись момента практического применения этих возможностей. Ниже показан список реальных веб-приложений, в которых используются препроцессоры, заметно улучшая при этом весь код.
Браузерные префиксы
Одним из наиболее ярких примеров преимущества использования препроцессоров является написание с их помощью свойств с браузерными префиксами. Один раз создав миксин с поддержкой браузерных префиксов, мы избавляем себя от рутинной работы.
Например, создадим для всех трех препроцессоров миксин скругления углов блока:
Sass
@mixin border-radius ($ values ) { -webkit-border-radius : $ values ; -moz-border-radius : $ values ; border-radius : $ values ; } div { @include border-radius(10px); }LESS
.border-radius (@values ) { -webkit-border-radius : @ values ; -moz-border-radius : @ values ; border-radius : @ values ; } div { .border-radius(10px); }Stylus
border-radius (values ) { -webkit-border-radius : values ; -moz-border-radius : values ; border-radius : values ; } div { border-radius(10px); }Скомпилированный CSS
div { -webkit-border-radius : 10px ; -moz-border-radius : 10px ; border-radius : 10px ; }Трехмерный текст
Создание эффекта трехмерности для текста с помощью CSS-свойства
1 | text-shadow |
Используя миксины и функции для работы с цветом, мы можем создать объемный текст и изменять его цвет на лету:
Sass
@mixin text3d ($ color ) { color : $ color ; text-shadow : 1px 1px 0px darken ($ color , 5% ), 2px 2px 0px darken ($ color , 10% ), 3px 3px 0px darken ($ color , 15% ), 4px 4px 0px darken ($ color , 20% ), 4px 4px 2px #000 ; } h1 { font-size : 32pt ; @include text3d(#0982c1); }LESS
.text3d (@color ) { color : @ color ; text-shadow : 1px 1px 0px darken (@ color , 5% ), 2px 2px 0px darken (@ color , 10% ), 3px 3px 0px darken (@ color , 15% ), 4px 4px 0px darken (@ color , 20% ), 4px 4px 2px #000 ; } span { font-size : 32pt ; .text3d(#0982c1); }Stylus
text3d (color ) color : color text-shadow : 1px 1px 0px darken (color , 5 %), 2px 2px 0px darken (color , 10 %), 3px 3px 0px darken (color , 15 %), 4px 4px 0px darken (color , 20 %), 4px 4px 2px #000 span font-size : 32pt text3d (#0982c1 )В примере для Stylus я выбрал вариант написания свойства
1 | text-shadow |
Скомпилированный CSS
span { font-size : 32pt ; color : #0982c1 ; text-shadow : 1px 1px 0px #097bb7 , 2px 2px 0px #0875ae , 3px 3px 0px #086fa4 , 4px 4px 0px #07689a , 4px 4px 2px #000 ; }Колонки
Использование переменных и числовых значений для этих переменных пришла мне в голову, когда я только начал знакомиться с возможностями CSS-препроцессоров. Объявление ширины для макета внутри переменной делает задачу изменения этой ширины (при необходимости ) простой и быстрой:
Sass
$ siteWidth : 1024px ; $ gutterWidth : 20px ; $ sidebarWidth : 300px ; body { margin : 0 auto ; width : $ siteWidth ; } .content { float : left ; width : $ siteWidth - ($ sidebarWidth +$ gutterWidth ); } .sidebar { float : left ; margin-left : $ gutterWidth ; width : $ sidebarWidth ; }LESS
@siteWidth : 1024px ; @gutterWidth : 20px ; @sidebarWidth : 300px ; body { margin : 0 auto ; width : @ siteWidth ; } .content { float : left ; width : @ siteWidth - (@ sidebarWidth +@ gutterWidth ); } .sidebar { float : left ; margin-left : @ gutterWidth ; width : @ sidebarWidth ; }Stylus
siteWidth = 1024px ; gutterWidth = 20px ; sidebarWidth = 300px ; body { margin : 0 auto ; width : siteWidth ; } .content { float : left ; width : siteWidth - (sidebarWidth + gutterWidth ); } .sidebar { float : left ; margin-left : gutterWidth ; width : sidebarWidth ; }Скомпилированный CSS
body { margin : 0 auto ; width : 1024px ; } .content { float : left ; width : 704px ; } .sidebar { float : left ; margin-left : 20px ; width : 300px ; }Некоторые уловки препроцессоров
Существует несколько хитростей при работе с CSS-препроцессорами. В этой статье я расскажу только о некоторой части из них. Но если эта тема вас заинтересовала, я рекомендую вам внимательно прочитать официальную документацию или же, что еще лучше, просто начните пользоваться препроцессором каждый день в процессе кодинга.
Сообщение об ошибках
Если вы уже пишите код на CSS достаточно давно, то наверняка сталкивались с ситуацией, когда внутри кода закралась ошибка, которую вы никак не можете найти. Если вы попадали в точно такую же ситуацию, то могу вас обрадовать - существует способ решить такую задачу.
CSS-препроцессоры могут сообщать об ошибках в коде и заставить их поступать таким образом достаточно просто. В этом случае препроцессор сам сообщает вам, в каком месте CSS-кода находиться ошибка (и все счастливы ).
Если вас заинтересовала подобная возможность во всех трех препроцессорах, то в этой статье подробно описано, как выполнить данную настройку.
Современный CSS - мощь, а в комбинации с препроцессорами - вообще боевая машина для оформления контента на страницах. В статье приведено развёрнутое руководство по Sass/SCSS с примерами. После прочтения узнаете, как использовать миксины, переменные и директивы для ещё большего контроля над стилями.
Примечание Весь код Sass/SCSS компилируется в CSS, чтобы браузеры могли его понимать и корректно отображать. В настоящее время браузеры не поддерживают работу с Sass/SCSS или с любым другим препроцессором CSS напрямую, стандартная же спецификация CSS не предоставляет аналогичную функциональность.
Зачем использовать Sass/SCSS вместо CSS?
- Вложенность - SCSS позволяет вкладывать правила CSS друг в друга. Вложенные правила применяются только для элементов, соответствующих внешним селекторам (а если речь идёт о Sass, то там и без скобок всё красиво и интуитивно понятно).
- Переменные - в стандартном CSS тоже есть понятие переменных, но в Sass с ними можно работать немного по-другому. Например, повторять их через директиву @for . Или генерировать свойства динамически. Подробнее можете изучить на русскоязычном сайте проекта.
- Улучшенные математические операции - можно складывать, вычитать, умножать и делить значения CSS. В отличие от стандартного CSS, Sass/SCSS позволяют обойтись без calc() .
- Тригонометрия - SCSS позволяет писать собственные (синусоидальные и косинусоидальные) функции, используя только синтаксис Sass/SCSS, подобно тому, как это можно делать в других языках вроде JavaScript.
- Директивы @for , @while и выражение @if-else - можно писать CSS-код, используя знакомые элементы из других языков. Но не обольщайтесь - в итоге на выходе будет обычный CSS.
- Миксины (примеси) - можно один раз создать набор CSS-свойств и работать с ними повторно или смешивать с другими значениями. Миксины можно использовать для создания отдельных тем одного макета. Примеси также могут содержать целые CSS-правила или что-либо другое, разрешённое в Sass-документе. Они даже могут принимать аргументы, что позволяет создавать большое разнообразие стилей при помощи небольшого количества миксинов.
- Функции - можно создавать определения CSS в виде функций для многократного использования.
Препроцессор Sass
Sass не динамичен. У вас не получится генерировать и/или анимировать CSS-свойства и значения в реальном времени. Но можно их создавать более эффективным способом и позволить стандартным свойствам (вроде анимации на CSS) заимствовать их оттуда.
Синтаксис
SCSS особо не добавляет никаких новых возможностей CSS, кроме нового синтаксиса, часто сокращающего время написания кода.
Пререквизиты
Существует 5 CSS-препроцессоров: Sass, SCSS, Less, Stylus и PostCSS.
Эта статья по большей части охватывает SCSS, который похож на Sass. Детальнее об этих препроцессорах можете прочитать на Stack Overflow (оригинал) или на qaru (перевод на русский).
SASS - (.sass) S yntactically A wesome S tyle S heets.
SCSS - (.scss) Sass y C ascading S tyle S heets.
Расширения.sass и.scss похожи, но всё-таки не одинаковы. Для фанатов командной строки приводим способ конвертации:
# Конвертация из Sass в SCSS $ sass-convert style.sass style.css # Конвертация из SCSS в Sass $ sass-convert style.scss style.sass
Sass - первая спецификация для SCSS с расширением файла.sass . Её разработка началась ещё в 2006 году, но позже был разработан альтернативный синтаксис с расширением.scss .
Обратите внимание Другие препроцессоры функциональностью похожи на SCSS, но синтаксис может отличаться. А ещё, всё то, что работает в CSS, будет также прекрасно воспроизводиться и в Sass, и в SCSS.
Переменные
Sass/SCSS позволяет работать с переменными. В CSS они обозначаются двойным тире (--), а в препроцессорах знаком доллара ($).
$number: 1; $color: #ff0000; $text: "tproger forever."; $text: "IT forever." !default; $nothing: null;
Вы можете присваивать значение по умолчанию переменным, у которых ещё нет значения, добавив метку!default в конце значения. В таком случае, если переменной уже было присвоено значение, оно не изменится; если же переменная пуста, ей будет присвоено новое указанное значение.
#container { content: $text; }
Переменные в Sass могут быть присвоены любому свойству.
Вложенные правила
Стандартные вложенные CSS-элементы с использованием пробела:
/* Вложенные правила */ #A { color: red; } #A #B { color: green; } #A #B #C p { color: blue; }
Те же вложенные элементы с помощью SCSS:
/* Вложенные правила */ #A { color: red; #B { color: green; #C p { color: blue; } } }
Как видно, синтаксис выглядит более чистым и менее повторяющимся.
Это особенно полезно при управлении перегруженными макетами. Таким образом, выравнивание, в котором вложенные свойства записаны в коде, полностью соответствует действительной структуре макета приложения.
За кулисами препроцессор всё ещё компилирует его в стандартный код CSS (показано выше), чтобы он мог быть отображён в браузере. Мы лишь изменяем способ написания CSS.
Амперсанд
#p { color: black; a { font-weight: bold; &:hover { color: red; } } }С помощью символа & вы можете явно указать, где должен быть вставлен родительский селектор.
Результат компиляции Sass (из предыдущего примера) в CSS ниже.
#p {color: black;} #p a {font-weight: bold;} #p a:hover {color: red;}
В итоге амперсанд был компилирован в название родительского элемента a (a:hover).
Миксины (они же примеси)
Миксины могут также содержать селекторы, в том числе со свойствами. А селекторы могут содержать ссылки на родительский элемент через амперсанд (&), вы ведь помните про него?
Пример работы с несколькими браузерами
Некоторые вещи в CSS весьма утомительно писать, особенно в CSS3, где плюс ко всему зачастую требуется использовать большое количество вендорных префиксов(-webkit- или -moz-).
Миксины позволяют создавать группы деклараций CSS, которые вам придётся использовать несколько раз на сайте. Хорошей практикой будет использование миксинов для вендорных префиксов. Пример:
@mixin border-radius($radius) { // Префиксы для: -webkit-border-radius: $radius; // Chrome и Safari -moz-border-radius: $radius; // Firefox -ms-border-radius: $radius; // Internet Explorer -o-border-radius: $radius; // Opera border-radius: $radius; // Стандартный CSS } // Пример использования миксина border-radius после его создания.box { @include border-radius(10px); }
Арифметические операции
Как и в реальной жизни, вы не можете работать с числами, у которых несовместимы типы данных (например, сложение рх и em).
Сложение и вычитание
p { font-size: 10px + 2em; // ОШИБКА! font-size: 10px + 6px; // 16px font-size: 10px + 2; // 12px }Всегда обращайте внимание на тип складываемых данных. То есть пиксели к пикселям, слоны к слонам. Таким же образом работает вычитание, но со знаком минус.
Пример вычитания:
Умножение
Выполняется точно так же, как в CSS, с помощью calc(a * b) , но без calc и круглых скобок. Кроме того, можно ещё отделять знак умножения пробелами от чисел (5*6 == 5 * 6).
Исключение Нельзя умножать пиксели между собой. То есть, 10px * 10px != 100px . 10px * 10 == 100px .
P { width: 10px * 10px; // ОШИБКА! width: 10px * 10; // 100px width: 1px * 5 + 5px; // 10px width: 5 * (5px + 5px); // 50px width: 5px + (10px / 2) * 3; // 20px }
Деление
С делением дела обстоят немного сложнее, но разобраться можно, ведь в стандартном CSS косая линия (слэш) зарезервирована для использования краткой формы записи свойств. Пример ниже.
/* краткая форма записи свойств */ font: italic bold .8em/1.2 Arial, sans-serif; /* стандартная форма записи свойств */ font-style: italic; font-weight: bold; font-size: .8em; line-height: 1.2; font-family: Arial, sans-serif;
Есть три помощника, которые намекнут на возможность деления:
- Значение (или любая его часть) хранится в переменной или возвращается функцией.
- Значения заключены в круглые скобки.
- Значение используется как часть другого арифметического выражения.
$var1: 20; $var2: 4; p { top: 16px / 24px; // Отображается без изменений в стандартном CSS top: (20px / 5px); // Производится деление (но только при использовании скобок) top: #{$var1} / #{$var2}; // Выводится как обычный CSS-код, деление не выполняется top: $var1 / $var2; // Деление выполняется top: random(4) / 5; // Деление выполняется (если использовать в паре с функцией) top: 2px / 4px + 3px; // Деление выполняется, если добавлена ещё одно арифметическое действие }
Результат компиляции в CSS:
P { top: 16px / 24px; top: 4; top: 20 / 4; top: 5; top: 0.6; top: 3.5px; }
Остаток
Остаток вычисляет остаток от операции деления. Ниже рассмотрим, как создать «зебру» для HTML-списка.
@mixin zebra() { @for $i from 1 through 7 { @if ($i % 2 == 1) { .stripe-#{$i} { background-color: black; color: white; } } } } * { @include zebra(); text-align: center; }
Создание миксина zebra показано во вставке кода сверху. Директивы @for и @if описаны в секции ниже.
Для создания образца надо написать несколько HTML-элементов.
Результат в браузере:
Зебра успешно сгенерирована миксином zebra
Операторы сравнения
Директива @if принимает выражение SassScript и использует вложенные в неё стили в случае, если выражение возвращает любое значение, кроме false или null .
Ниже показано, как работают директивы @if и @else , вложенные в миксин.
@mixin spacing($padding, $margin) { @if ($padding > $margin) { padding: $padding; } @else { padding: $margin; } } .container { @include spacing(10px, 20px); }
Сравнение в действии. Миксин spacing выберет размеры padding ’а, если тот будет больше, чем margin .
После компиляции в CSS:
Container { padding: 20px; }
Логические операторы
Описание логических операторов
Использование логических операторов Sass для создания кнопки, у которой будет меняться фон в зависимости от её ширины.
@mixin button-color ($height, $width) { @if (($height < $width) and ($width >= 35px)) { background-color: blue; } @else { background-color: green; } } .button { @include button-color(20px, 30px) }
Строки
В CSS определено 2 типа строк: с кавычками и без. Sass распознаёт и то, и другое. В итоге вы получите в CSS тот тип строк, который использовали в Sass.
В некоторых случаях можно добавить строки в допустимые значения CSS без кавычек, но только если добавленная строка является завершающим элементом.
P { font: 50px Ari + "al"; // Компилируется в 50px Arial }
Пример ниже демонстрирует, как делать не надо.
P { font: "50px" + Arial; // ОШИБКА! }
Можете складывать строки разных типов, если в них нет пробелов. Пример ниже не будет скомпилирован.
P:after { content: "Верните Линуса " + Торвальдса!; // ОШИБКА! }
P:after { content: "Верните Линуса " + "Торвальдса!"; // обратите внимание на "Торвальдса!" }
Пример сложения нескольких строк:
P:after { content: "Удел " + "человечества " + "-" + "итерация."; }
Сложение строк и чисел:
P:after { content: "Рекурсия " + 2013 + " удел небожителей"; }
Обратите внимание Свойство content работает только с псевдоселекторами:before и:after . Рекомендуется не использовать content в CSS-документе, а напрямую использовать его между тегами в HTML.
Операторы управления потоками
В SCSS есть функции (fucntion()) и директивы (@directive). Чуть выше мы уже рассматривали пример функции, когда изучали передачу аргументов внутри миксинов.
Функции обычно заключаются в скобки, следующие сразу за её именем. А директива начинается с символа @ .
Подобно JavaScript, SCSS позволяет работать со стандартным набором операторов управления потоками.
if()
if() - это функция (и иногда основа искусственного интеллекта).
Её использование выглядит довольно примитивным: оператор вернёт одно из двух обозначенных в условии значений.
/* Использование функции if() */ if (true, 1px, 2px) => 1px; if (false, 1px, 2px) => 2px;
@if
@if - это директива, использующаяся для разветвления на основе условия.
/* Использование директивы @if */ p { @if 1 + 1 == 2 { border: 1px solid; } @if 7 < 5 { border: 2px dotted; } @if null { border: 3px double; } }
Результат компиляции:
P { border: 1px solid; }
Ниже показано комбо-разветвление с добавлением директивы @else .
/* Создание переменной $type */ $type: river; /* Окрашивание контейнеров в синий в случае, если значение для переменной $type - river */ div { @if $type == river { color: blue; } } /* Условные цвета для текста в теге
*/ p { @if $type == tree { color: green; } @else if $type == river { color: blue; } @else if $type == dirt { color: brown; } }
Проверка на наличие родительского элемента
Амперсанд выбирает родительский элемент, если тот существует. В ином случае вернёт null . Поэтому может использоваться совместно с директивой @if .
В следующих примерах рассмотрим создание условных CSS-стилей в зависимости от наличия родительского элемента.
/* Проверка на наличие родительского элемента */ @mixin does-parent-exist { @if & { /* Применение голубого цвета родительскому элементу, если он существует */ &:hover { color: blue; } } @else { /* Родительский элемент отсутствует, применение голубого цвета к ссылкам */ a { color: blue; } } }
Директива @for
Директива @for выводит набор стилей заданное число раз. Для каждого повторения используется переменная-счётчик для изменения вывода.
Директива @for итерируется 5 раз.
@for $i from 1 through 5 { .definition-#{$i} { width: 10px * $i; } }
Результат компиляции в CSS:
Definition-1 { width: 10px; } .definition-2 { width: 20px; } .definition-3 { width: 30px; } .definition-4 { width: 40px; } .definition-5 { width: 50px; }
Директива @each
Директива @each устанавливает $var в каждое из значений списка или словаря и выводит содержащиеся в ней стили, используя соответствующее значение $var .
@each $animal in platypus, lion, sheep, dove { .#{$animal}-icon { background-image: url("/images/#{$animal}.png") } }
Результат компиляции в CSS:
Platypus-icon { background-image: url("/images/platypus.png"); } .lion-icon { background-image: url("/images/lion.png"); } .sheep-icon { background-image: url("/images/sheep.png"); } .dove-icon { background-image: url("/images/dove.png"); }
Директива @while
Директива @while принимает выражение SassScript и циклично выводит вложенные в неё стили, пока выражение вычисляется как true . Она может быть использована для создания более сложных циклов, чем таких, для которых подходит @for , хотя она бывает необходима довольно редко. Например:
$index: 5; @while $index > 0 { .element-#{$index} { width: 10px * $index; } $index: $index - 1; }
Результат компиляции:
Element-5 { width: 50px; } .element-4 { width: 40px; } .element-3 { width: 30px; } .element-2 { width: 20px; } .element-1 { width: 10px; }
Функции в Sass/SCSS
Используя Sass/SCSS можно использовать функции так же, как и в других языках.
Создадим функцию three-hundred-px() , возвращающую 300px.
@function three-hundred-px() { @return 300px; } .name { width: three-hundred-px(); border: 1px solid gray; display: block; position: absolute; }
После применения класса.name ширина элемента будет равна 300 пикселям.
Функции в Sass могут возвращать любое корректное значение CSS и могут быть назначены любому свойству. Они даже могут быть рассчитаны на основе переданного аргумента.
@function double($width) { @return $width * 2; }
Тригонометрия
Тригонометрические функции sin() и cos() часто встречаются в виде встроенных классов во многих языках, таких как JavaScript, например.
Их работу стоит изучать, если нужно сократить время, затрачиваемое на разработку анимаций пользовательского интерфейса, например для создания троббера . Мы, кстати, уже об этом в одной из статей. Но в данном случае это будет код, а не gif-картинка, вставленная в HTML-документ.
Ниже рассмотрим пару примеров для создания интересных анимационных эффектов с помощью функции sin() , в которых количество кода сведено к минимуму. Далее можете масштабировать эти знания на создание интерактивных элементов пользовательского интерфейса (движение по кругу, волнистая анимация).
Преимущество использования тригонометрии в сочетании с CSS выражается в отсутствии дополнительных HTTP-запросов, как это происходит с gif-изображениями.
Можно писать тригонометрические функции на Sass. Об этом читайте далее.
Написание собственных функций
В тригонометрии многие операции основаны на функциях. Каждая функция строится на основе другой. Например, функция rad() требует использования PI() . Функции cos() и sin() требуют использование rad() .
@function PI() { @return 3.14159265359; }
Написание функций на Sass/SCSS очень похоже на написание функций в других языках.
Использование функции pow() :
@function pow ($number, $exp) { $value: 1; @if $exp > 0 { @for $i from 1 through $exp { $value: $value * $number; } } @else if $exp < 0 { @for $i from 1 through -$exp { $value: $value / $number; } } @return $value; }
Использование функции rad() :
@function rad ($angle) { $unit: unit ($angle); $unitless: $angle / ($angle *0 + 1); //Если значение angle (угла) указано в градусах ("deg"), нужно конвертировать его в радианы. @if $unit == deg { $unitless: $unitless / 180 * PI(); } @return $unitless; }
Для вычисления тангенса функцией tan() нужно применить функции sin() и cos() ..
Абсолютно все опытные верстальщики используют препроцессоры. Исключений нет. Если вы хотите добиться успеха в этой деятельности, не забывайте об этих программах. С первого взгляда они могут вызвать у новичка тихий ужас - это уже слишком похоже на программирование! На самом деле можно разобраться со всеми возможностями препроцессоров CSS примерно за день, а если постараться, то и за пару часов. В дальнейшем они существенно упростят вам жизнь.
Как появились препроцессоры CSS
Чтобы лучше понять особенности этой технологии, ненадолго погрузимся в историю развития визуального представления веб-страниц.
Когда только-только началось массовое применение интернета, никаких таблиц стилей не существовало. Оформление документов зависело исключительно от браузеров. В каждом из них были свои стили, которые использовались для обработки определенных тегов. Соответственно, страницы выглядели по-разному в зависимости от того, в каком браузере вы их открывали. Результат - хаос, путаница, проблемы для разработчиков.
В 1994 году норвежский ученый Хокон Ли разработал таблицу стилей, которая могла использоваться для оформления внешнего вида страницы отдельно от HTML-документа. Идея приглянулась представителям консорциума W3C, которые тотчас же принялись за ее доработку. Спустя несколько лет вышла в свет первая версия спецификации CSS. Затем она постоянно совершенствовалась, дорабатывалась… Но концепция оставалась все той же: каждому стилю задаются определенные свойства.
Использование таблиц CSS всегда вызывало определенные проблемы. Например, у верстальщиков часто возникали трудности с сортировкой и группировкой свойств, да и с наследованием не все так однозначно.
И вот наступили двухтысячные. Разметкой все чаще начали заниматься профессиональные фронтенд-разработчики, для которых важна была гибкая и динамическая работа со стилями. Существовавший на тот момент CSS требовал расстановки префиксов и отслеживания поддержки новых возможностей браузеров. Тогда специалисты по JavaScript и Ruby взялись за дело, создав препроцессоры - надстройки для CSS, добавляющие в него новые возможности.
CSS для начинающих: особенности препроцессоров
Они выполняют несколько функций:
- унифицируют браузерные префиксы и хаки;
- упрощают синтаксис;
- дают возможность работать с вложенными селекторами без ошибок;
- улучшают логику стилизации.
Вкратце: препроцессор добавляет в возможности CSS логику программирования. Теперь стилизация выполняется не обычным перечислением стилей, а с помощью нескольких простых приемов и подходов: переменных, функций, миксинов, циклов, условий. Вдобавок появилась возможность использовать математику.
Видя популярность таких надстроек, в W3C начали постепенно добавлять возможности из них в код CSS. Например, так в спецификации появилась функция calc(), которая поддерживается многими браузерами. Ожидается, что в скором времени можно будет задавать переменные и создавать миксины. Однако это произойдет в далеком будущем, а препроцессоры уже здесь и уже отлично работают.
Популярные препроцессоры CSS. Sass
Разработан в 2007 году. Изначально являлся компонентом Haml - шаблонизатора HTML. Новые возможности по управлению элементами CSS пришлись по вкусу разработчикам на Ruby on Rails, которые начали распространять его повсеместно. В Sass появилось огромное количество возможностей, которые сейчас входят в любой препроцессор: переменные, вложение селекторов, миксины (тогда, однако, в них нельзя было добавлять аргументы).
Объявление переменных в Sass
Переменные объявляются с помощью знака $. В них можно сохранять свойства и их наборы, например: “$borderSolid: 1px solid red;”. В этом примере мы объявили переменную под названием borderSolid и сохранили в ней значение 1px solid red. Теперь, если в CSS нам потребуется создать красный border шириной в 1px, просто указывает эту переменную после названия свойства. После объявления переменные менять нельзя. Доступно несколько встроенных функций. Например, объявим переменную $redColor со значением #FF5050. Теперь в коде CSS, в свойствах какого-нибудь элемента, используем ее для задания цвета шрифта: p { color: $redColor; }. Хотите поэкспериментировать с цветом? Используйте функции darken или lighten. Это делается так: p { color: darken($redColor, 20%); }. В результате цвет redColor станет на 20 % светлее.
Вложенность
Раньше для обозначения вложенности приходилось использовать длинные и неудобные конструкции. Представим, что у нас есть div, в котором лежит p, а в нём, в свою очередь, расположен span. Для div нам нужно задать цвет шрифта red, для p - yellow, для span - pink. В обычном CSS это делалось бы следующим образом:
С помощью препроцессора CSS все делается проще и компактнее:
Элементы буквально «вкладываются» один в другой.
Директивы препроцессора
С помощью директивы @import можно импортировать файлы. Например, у нас есть файл fonts.sass, в котором объявлены стили для шрифтов. Подключаем его в основной файл style.sass: @import ‘fonts’. Готово! Вместо одного большого файла со стилями у нас есть несколько, которые можно использовать для быстрого и легкого доступа к требуемым свойствам.
Миксины
Одна из самых интересных задумок. Дает возможность одной строкой задавать целый набор свойств. Работают следующим образом:
@mixin largeFont {
font-family: ‘Times New Roman’;
font-size: 64px;
line-height: 80px;
font-weight: bold;
Чтобы применить миксин к элементу на странице, используем директиву @include. Например, мы хотим применить его к заголовку h1. Получается следующая конструкция: h1 { @include: largeFont; }
Все свойства из миксина будут присвоены элементу h1.
Препроцессор Less
Синтаксис Sass напоминает о программировании. Если вы ищете вариант, который больше подходит изучающим CSS для начинающих, обратите внимание на Less. Он был создан в 2009 году. Главная особенность - поддержка нативного так что незнакомым с программированием верстальщикам его будет проще освоить.
Переменные объявляются с помощью символа @. Например: @fontSize: 14px;. Вложенность работает по тем же принципам, что и в Sass. Миксины объявляются следующим образом: .largeFont() { font-family: ‘Times New Roman’; font-size: 64px; line-height: 80px; font-weight: bold; }. Для подключения не нужно использовать директивы препроцессоров - просто добавьте свежесозданный миксин в свойства выбранного элемента. Например: h1 { .largeFont; }.
Stylus
Еще один препроцессор. Создан в 2011 году тем же автором, что подарил миру Jade, Express и другие полезные продукты.
Переменные можно объявлять двумя способами - явно или неявно. Например: font = ‘Times New Roman’; - это неявный вариант. А вот $font = ‘Times New Roman’ - явный. Миксины объявляются и подключаются неявно. Синтаксис таков: redColor() color red. Теперь можем добавить его элементу, например: h1 redColor();.
На первый взгляд Stylus может показаться непонятным. Где «родные» скобки и точки с запятой? Но стоит только в него погрузиться, как все становится намного более ясным. Однако помните, что длительная разработка с этим препроцессором может «отучить» вас использовать классический синтаксис CSS. Это иногда вызывает проблемы при необходимости работать с «чистыми» стилями.
Какой препроцессор выбрать?
На самом деле это… не имеет значения. Все варианты предоставляют примерно одинаковые возможности, просто синтаксис у каждого разный. Рекомендуем действовать следующим образом:
- если вы - программист и хотите работать со стилями как с кодом, используйте Sass;
- если вы - верстальщик и хотите работать со стилями как с обычной версткой, обратите внимание на Less;
- если вы любите минимализм, воспользуйтесь Stylus.
Для всех вариантов доступно огромное количество интересных библиотек, способных еще сильнее упростить разработку. Пользователям Sass рекомендуется обратить внимание на Compass - мощный инструмент с множеством встроенных возможностей. Например, после его установки вам уже никогда не придется беспокоиться о вендорных префиксах. Упрощается работа с сетками. Имеются утилиты для работы с цветами, спрайтами. Доступен ряд уже объявленных миксинов. Уделите этому средству пару дней - тем самым вы сэкономите немало сил и времени в будущем.