Что такое sass и less

Переводы, 2 февраля 2019 в 10:14

Современный CSS — мощь, а в комбинации с препроцессорами — вообще боевая машина для оформления контента на страницах. В статье приведено развёрнутое руководство по Sass/SCSS с примерами. После прочтения узнаете, как использовать миксины, переменные и директивы для ещё большего контроля над стилями.

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

Содержание статьи

Зачем использовать Sass/SCSS вместо CSS?

1. Вложенность — SCSS позволяет вкладывать правила CSS друг в друга. Вложенные правила применяются только для элементов, соответствующих внешним селекторам (а если речь идёт о Sass, то там и без скобок всё красиво и интуитивно понятно).
2. Переменные — в стандартном CSS тоже есть понятие переменных, но в Sass с ними можно работать немного по-другому. Например, повторять их через директиву @for . Или генерировать свойства динамически. Подробнее можете изучить на русскоязычном сайте проекта.
3. Улучшенные математические операции— можно складывать, вычитать, умножать и делить значения CSS. В отличие от стандартного CSS, Sass/SCSS позволяют обойтись без calc() .
4. Тригонометрия — SCSS позволяет писать собственные (синусоидальные и косинусоидальные) функции, используя только синтаксис Sass/SCSS, подобно тому, как это можно делать в других языках вроде JavaScript.
5. Директивы @for , @while и выражение @if-else — можно писать CSS-код, используя знакомые элементы из других языков. Но не обольщайтесь — в итоге на выходе будет обычный CSS.
6. Миксины (примеси) — можно один раз создать набор CSS-свойств и работать с ними повторно или смешивать с другими значениями. Миксины можно использовать для создания отдельных тем одного макета. Примеси также могут содержать целые CSS-правила или что-либо другое, разрешённое в Sass-документе. Они даже могут принимать аргументы, что позволяет создавать большое разнообразие стилей при помощи небольшого количества миксинов.
7. Функции— можно создавать определения CSS в виде функций для многократного использования.

Препроцессор Sass

Sass не динамичен. У вас не получится генерировать и/или анимировать CSS-свойства и значения в реальном времени. Но можно их создавать более эффективным способом и позволить стандартным свойствам (вроде анимации на CSS) заимствовать их оттуда.

Синтаксис

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

Пререквизиты

Существует 5 CSS-препроцессоров: Sass, SCSS, Less, Stylus и PostCSS.

Эта статья по большей части охватывает SCSS, который похож на Sass. Детальнее об этих препроцессорах можете прочитать на Stack Overflow (оригинал) или на qaru (перевод на русский).

SASS — (.sass) Syntactically Awesome Style Sheets.

«Яндекс», Москва, Минск, от 100 000 до 300 000 ₽

SCSS — (.scss) Sassy Cascading Style Sheets.

Расширения .sass и .scss похожи, но всё-таки не одинаковы. Для фанатов командной строки приводим способ конвертации:

Sass — первая спецификация для SCSS с расширением файла .sass . Её разработка началась ещё в 2006 году, но позже был разработан альтернативный синтаксис с расширением .scss .

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

Переменные

Sass/SCSS позволяет работать с переменными. В CSS они обозначаются двойным тире ( — ), а в препроцессорах знаком доллара ( $ ).

Вы можете присваивать значение по умолчанию переменным, у которых ещё нет значения, добавив метку !default в конце значения. В таком случае, если переменной уже было присвоено значение, оно не изменится; если же переменная пуста, ей будет присвоено новое указанное значение.

Переменные в Sass могут быть присвоены любому свойству.

Вложенные правила

Стандартные вложенные CSS-элементы с использованием пробела:

Те же вложенные элементы с помощью SCSS:

Как видно, синтаксис выглядит более чистым и менее повторяющимся.

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

За кулисами препроцессор всё ещё компилирует его в стандартный код CSS (показано выше), чтобы он мог быть отображён в браузере. Мы лишь изменяем способ написания CSS.

Амперсанд

В SCSS используется директива & .

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

Результат компиляции Sass (из предыдущего примера) в CSS ниже.

В итоге амперсанд был компилирован в название родительского элемента a ( a:hover ).

Миксины (они же примеси)

Миксины объявляются директивой @mixin . После неё должно стоять имя миксина и, опционально, его параметры, а также блок, содержащий тело миксина. Например, можно определить миксин flexible() , который далее будет включён, например, в класс .centered-elements следующим образом:

Теперь каждый раз после применения класса .centered-elements к HTML-элементу, последний будет преобразован во Flexbox.

Миксины могут также содержать селекторы, в том числе со свойствами. А селекторы могут содержать ссылки на родительский элемент через амперсанд ( & ), вы ведь помните про него?

Пример работы с несколькими браузерами

Некоторые вещи в CSS весьма утомительно писать, особенно в CSS3, где плюс ко всему зачастую требуется использовать большое количество вендорных префиксов( -webkit- или -moz- ).

Миксины позволяют создавать группы деклараций CSS, которые вам придётся использовать несколько раз на сайте. Хорошей практикой будет использование миксинов для вендорных префиксов. Пример:

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

Как и в реальной жизни, вы не можете работать с числами, у которых несовместимы типы данных (например, сложение рх и em ).

Сложение и вычитание

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

Умножение

Выполняется точно так же, как в CSS, с помощью calc(a * b) , но без calc и круглых скобок. Кроме того, можно ещё отделять знак умножения пробелами от чисел ( 5*6 == 5 * 6 ).

Исключение Нельзя умножать пиксели между собой. То есть, 10px * 10px != 100px . 10px * 10 == 100px .

Деление

С делением дела обстоят немного сложнее, но разобраться можно, ведь в стандартном CSS косая линия (слэш) зарезервирована для использования краткой формы записи свойств. Пример ниже.

Есть три помощника, которые намекнут на возможность деления:

1. Значение (или любая его часть) хранится в переменной или возвращается функцией.
2. Значения заключены в круглые скобки.
3. Значение используется как часть другого арифметического выражения.

Результат компиляции в CSS:

Остаток

Остаток вычисляет остаток от операции деления. Ниже рассмотрим, как создать «зебру» для HTML-списка.

Создание миксина zebra показано во вставке кода сверху. Директивы @for и @if описаны в секции ниже.

Для создания образца надо написать несколько HTML-элементов.

Результат в браузере:

Зебра успешно сгенерирована миксином zebra

Операторы сравнения

Директива @if принимает выражение SassScript и использует вложенные в неё стили в случае, если выражение возвращает любое значение, кроме false или null .

Ниже показано, как работают директивы @if и @else , вложенные в миксин.

Сравнение в действии. Миксин spacing выберет размеры padding ’а, если тот будет больше, чем margin .

После компиляции в CSS:

Логические операторы

Описание логических операторов

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

Строки

В CSS определено 2 типа строк: с кавычками и без. Sass распознаёт и то, и другое. В итоге вы получите в CSS тот тип строк, который использовали в Sass.

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

Пример ниже демонстрирует, как делать не надо.

Читайте также:  Вай фай адаптер для компьютера какой лучше

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

Строки, содержащие пробелы, должны быть отделены кавычками. Решение проблемы:

Пример сложения нескольких строк:

Сложение строк и чисел:

Обратите внимание Свойство content работает только с псевдоселекторами :before и :after . Рекомендуется не использовать content в CSS-документе, а напрямую использовать его между тегами в HTML.

Операторы управления потоками

В SCSS есть функции ( fucntion() ) и директивы ( @directive ). Чуть выше мы уже рассматривали пример функции, когда изучали передачу аргументов внутри миксинов.

Функции обычно заключаются в скобки, следующие сразу за её именем. А директива начинается с символа @ .

Подобно JavaScript, SCSS позволяет работать со стандартным набором операторов управления потоками.

if() — это функция (и иногда основа искусственного интеллекта).

Её использование выглядит довольно примитивным: оператор вернёт одно из двух обозначенных в условии значений.

@if — это директива, использующаяся для разветвления на основе условия.

Ниже показано комбо-разветвление с добавлением директивы @else .

Проверка на наличие родительского элемента

Амперсанд выбирает родительский элемент, если тот существует. В ином случае вернёт null . Поэтому может использоваться совместно с директивой @if .

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

Директива @for

Директива @for выводит набор стилей заданное число раз. Для каждого повторения используется переменная-счётчик для изменения вывода.

Директива @for итерируется 5 раз.

Результат компиляции в CSS:

Директива @each

Директива @each устанавливает $var в каждое из значений списка или словаря и выводит содержащиеся в ней стили, используя соответствующее значение $var .

Результат компиляции в CSS:

Директива @while

Директива @while принимает выражение SassScript и циклично выводит вложенные в неё стили, пока выражение вычисляется как true . Она может быть использована для создания более сложных циклов, чем таких, для которых подходит @for , хотя она бывает необходима довольно редко. Например:

Функции в Sass/SCSS

Используя Sass/SCSS можно использовать функции так же, как и в других языках.

Создадим функцию three-hundred-px() , возвращающую 300px.

После применения класса .name ширина элемента будет равна 300 пикселям.

Результат в браузере:

Функции в Sass могут возвращать любое корректное значение CSS и могут быть назначены любому свойству. Они даже могут быть рассчитаны на основе переданного аргумента.

Тригонометрия

Тригонометрические функции sin() и cos() часто встречаются в виде встроенных классов во многих языках, таких как JavaScript, например.

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

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

Преимущество использования тригонометрии в сочетании с CSS выражается в отсутствии дополнительных HTTP-запросов, как это происходит с gif-изображениями.

Можно писать тригонометрические функции на Sass. Об этом читайте далее.

Написание собственных функций

В тригонометрии многие операции основаны на функциях. Каждая функция строится на основе другой. Например, функция rad() требует использования PI() . Функции cos() и sin() требуют использование rad() .

Написание функций на Sass/SCSS очень похоже на написание функций в других языках.

Использование функции pow() :

Использование функции rad() :

Для вычисления тангенса функцией tan() нужно применить функции sin() и cos() .

Заключение

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

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

Каскадные таблицы стилей и LESS

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

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

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

Они позволяют в значительной степени упростить работу с каскадными таблицами. Быстро создавать файлы CSS и управлять ими.

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

Один из самых популярных препроцессоров среди дизайнеров и веб-мастеров – это LESS. Созданный в 2009 году Алексисом Сельером, он представляет собой продукт с открытым исходным кодом, написанным на JavaScript (первые версии были на Ruby), который характеризуется малым порогом вхождения и валидностью по отношению к CSS.

Использование LESS

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

Применение данной надстройки для CSS не вызовет никаких трудностей, она прекрасно работает, как на стороне клиента, так и на web-сервере.

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

Чтобы использовать препроцессор на web-сервере, потребуется скомпилировать файл с кодом через Node или использовать различные другие инструменты, которые могут предоставить сторонние производители. Среди них могут быть:

WinLess (для Майкрософт Виндоуз);

Less.app (для Мас ОС);

Что может предложить LESS?

LESS поможет осуществить расширение функционала CSS и позволит создавать при работе с кодом:

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

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

Читайте также:  Tp link нет доступа к интернету

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

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

Основные плюсы препроцессоров и LESS

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

создавать удобные синтаксические конструкции;

ускорить работу над документом и кодом;

сделать документ более приятным для прочтения человеком;

придать коду в документе определённый порядок и логику;

сделать файл более производительным.

Так что, пользоваться LESS – это действительно удобно!

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

Как же понять, для чего использовать LESS, а для чего Sass? В принципе, они достаточно похожи между собой. Давайте рассмотрим их общие характеристики:

* Mixins – классы для классов.
* Parametric mixins – классы, к которым вы можете применить параметры типа функций.
* Nested Rules – классы внутри классов, которые срезают повторяющийся код.
* Operations – математика в пределах CSS.
* Color functions – редактирование цветов.
* Namespaces – группы стилей, которые могут быть вызваны ссылками.
* Scope – произведение локальных изменений в стилях.
* javascript evaluation – javascript-выражения, определенные в CSS.

Основное различие между LESS и Sass заключается в том, каким образом они производятся. LESS – в библиотеке javascript и, соответственно, выполняет работу на стороне клиента.

Sass, в свою очередь, запускает Ruby и работает на серверной стороне. Многие разработчики не пользуются LESS из-за того, на обработку кода движком javascript требуется больше времени, и в результате мы получаем измененный CSS-код для браузера. Существует несколько путей оперирования. Я пользуюсь тем, когда LESS используется только при процессе разработки. Как только я заканчиваю, я копирую и вставляю результат, полученный в LESS в уменьшитель кода, а затем в отдельный CSS-файл, который должен быть включен вместо файлов LESS. Другой способ заключается в применении LESS.app для компиляции и минимизации ваших файлов LESS. Оба способа минимизируют наполнение ваших стилей, а также помогут избежать проблем, которые могут возникнуть, в случае если браузер клиента не поддерживает javascript. Это бывает редко, но данную возможность исключать нельзя.

Просим вас также учитывать отзыв от Адама Стковиака (Adam Stacoviak), который был написан после бурных обсуждений статьи от Smashing Magazine в Twitter: «На самом деле, Sass требует Ruby, хотя он и не должен быть скомпилирован в CSS-документ на сервере. Он может быть скомпилирован локально (как было указано в LESS), и этот скомпилированный файл может быть перемещен вместе с вашим проектом, шаблоном для WordPress, для Expression Engine и так далее. Так как это Smashing Magazine, и контингент пользователей может значительно разниться, я предполагаю, что многие из вас используют Mac. Итак, Ruby по умолчанию есть на всех машинах Mac, так что простая установка Sass позволит вам сразу же приступить к работе.

Как только вы установили Sass, вы можете локально конвертировать его в CSS и переправить код с проектом, как я уже рассказывал. Если вы не уверены в том, как начать работу с Sass (или Compass), то мы написали достаточно детальное руководство под названием «Getting Started with Sass and Compass» (приступаем к работе с Sass или Compass)». Давайте все дружно поблагодарим Адама!

Установка

LESS достаточно просто внедрить в любой проект, над которым вы работаете:

1. Скачайте копию less.js ;
2. Создайте файл, который вы наполните своими стилями (например, style.less);
3. Добавьте следующий код в «head» вашего HTML-документа:

Учитывайте атрибут «rel» у ссылки. Вы обязательно должны закрепить «/less» в конец значения. Это нужно для того, чтобы LESS заработал. Вам также следует включить скрипт сразу же после ссылки на документ таблиц стилей. Если вы работаете на HTML5 (а я не вижу причин, почему бы не работать на нем), то вы можете оставить «type=»text/css»» и «type=»text/javascript»».

Существует также серверная версия LESS. Наипростейший способ установки LESS на сервере производится с помощью Node Package Manager (NPM).

Переменные

Если вы разработчик, то наверняка переменные – ваши лучшие друзья. Если вам требуется несколько раз использовать одну и ту же информацию (например, цвет), настройка переменной имеет огромное значение. Таким образом, вы гарантируете самому себе сплоченность документа и освобождаете себя от постоянного скроллинга документа в поисках нужного hex-значения, чтобы скопировать его и использовать в новом элементе. Вы даже можете позабавиться, добавив или исключив hex-значения, которые вам нужно генерировать. Возьмем данный пример:

Если мы применим данные стили к трём div’ам, то у нас получится эффект градации, созданный при помощи добавления и исключения значения к и от естественного синего:

Переход от @light_blue к @blue к @dark_blue.

Единственная разница между переменными в LESS и Sass заключается в том, что LESS использует «@», а Sass – «$». Существует также и другие отличия, но их не так сложно изучить.

Mixins

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

У вас получится нечто похожее на то, что вы надеялись получить, вернувшись в HTML-документ и добавив класс «.bordered» к обоим элементам. Но важно учесть то, что вы реализовали это, не закрывая документ CSS. Это работает следующим образом:

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

С помощью Sass вы объявляете «@mixin» приоритетным для стиля для того, чтобы определить его как mixin. Далее вы объявляете «@include» для того, чтобы вызвать его.

Параметрические Mixins

По типу того, как вы используете функции в CSS, данная функция может быть особо полезной для тех, кто охотно использует и без того, казалось бы, безграничные возможности современных CSS. Самый лучший и полезный пример её использования относится ко множеству префиксов производителей браузеров, с которыми сталкиваемся по время перехода от CSS2 к CSS3. Nettuts+ опубликовали отличный вебкаст и статью от Джеффри Уэя (Jeffrey Way), которая включает в себя детальную информацию о внедрении файла, полностью состоящего из полезных параметрических mixin’ов. Статья охватывает ваши любимые параметры CSS3 с префиксами производителей. Например, простой mixin для управления закругленными углами в различных формах:

В данном случае, класс «.border-radius» имеет радиус в 3 пикселя по умолчанию, но вы можете ввести любое угодное значение, и получить закругленные углы. Например, «.border-radius(10px)» закруглит углы на 10 пикселей.

Читайте также:  Как узнать настройки ip адреса

Синтаксис в Sass очень похож на LESS. Просто для переменных используйте «$», и вызывайте mixin’ы посредством методов «@mixin» и «@include», о которых я упоминал ранее.

Selector Inheritance (наследственность селектора)

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

Nested Rules (Разветвленные правила)

Разветвление классов и id в CSS – это, наверное, наилучший способ оградить ваши каскадные таблицы стилей от смешения с, либо наоборот направить их на взаимодействии с другими добавленными таблицами. Но данный подход зачастую может повлечь за собой хорошие объемы кода. Используя селектор типа «#site-body .post .post-header h2», у нас получается очень приятный глазу код, который занимает достаточно много пространства. С помощью LESS вы можете разветвлять id, классы и элементы как вам будет угодно. Используя пример, приведенный выше, вы можете сотворить нечто вроде этого:

Приведенный выше код абсолютно идентичен некрасивому селектору, о котором мы упомянули в предыдущем абзаце, но его гораздо легче прочесть и понять, и занимает он гораздо меньше места. Вы также можете в стилизации элементов сослаться на их псевдо-элементы используя «&» – в данном случае эта функция схожа с «this» в javascript.

Операции

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

К слову, я знаю, что я также могу разделять элементы на 4 и получать переменные типа «@quarter_page», но мне хотелось бы продемонстрировать то, что здесь также уместно правило с круглыми скобками. Скобки также будут обязательными, если вам захочется провести операцию внутри параметра. Например, «border: (@width / 2) solid #000».

Sass гораздо более универсален в случае с цифрами, нежели LESS. Он был встроен в конверсионные таблицы для комбинирования сравниваемых единиц. Sass может работать с неопределенными единицами измерений, а также выявлять их. Данное свойство было представлено в попытке укоренить значимость библиотеки против изменений, которые были внесены в W3C.

Функции цветов

Ранее я уже упоминал о том, как LESS помогает мне орудовать с цветовой схемой в процессе написания кода. С этим также нераздельно связана и функция цветов. Предположу, что вы используете стандартный синий цвет по всему документу стилей, и вам хочется применить данный цвет к отправной кнопке «Submit» в форме. Вы можете открыть Photoshop или любой другой редактор, чтобы получить оттуда hex-значение (для цвета, который немного светлее или темнее). Либо вы можете просто использовать функцию цветов, предусмотренную в LESS.

Функция «lighten» в прямом смысле осветляет цвет по процентной шкале. В данном случае, функция осветлит основной синий на 10%. Данный способ позволяет вам изменять цвет градированных элементов и любые другие элементы с таким же цветом, просто изменяя сам основной цвет. Это может предложить вам значительные возможности в процессе оформления. К тому же, если вы использовали параметрическую функцию (из тех, что описаны выше), вы можете облегчить себе работу над браузерными префиксами, превратить их в нечто вроде «.linear-gradient(lighten(@blue), @blue, 100%);».

С другой стороны, у вас получится достаточно красивый эффект:

Так и получилась наша красивая градированная кнопка Submit, основанная на переменной.

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

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

Условности и контроль

Ещё одна достаточно полезная штуковина, предложенная в LESS. С помощью Sass, у вас есть возможность использовать условные выражения «if < >else < >», а также циклы «for < >». Он поддерживает операторы «and», «or» и «not», а также « », « =» и «==».

Namespaces

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

Далее, в нашем коде, если мы встречаемся с элементом «ul» внутри элемента «nav», мы будем знать, что нам потребуется стиль default. Итак, мы без труда можем применить его.

Scope (учёт рамок)

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

Так как мы заново объявили переменную в селекторе «#header», значение до этой переменной будет отличаться и будет применимо только внутри данного селектора. Всё, что будет до или после него, сохранит значение изначального объявления.

Scope в Sass выполнен немного иным образом. В вышеприведенном коде, когда переменная «@color» изменена на «red», она будет интерпретирована в коде как есть.

Comments (Комментарии)

Данная часть достаточно проста. В LESS валидны два типа комментариев. Стандартный CSS-комментарий «/* comment */» — валиден и будет проведен через обработку и далее представлен. Однострочные комментарии «// comment» также работают, но они не будут проведены и выведены. Следовательно, им можно повесить ярлык «silent».

Импорт

Импорт также вполне стандартен. Стандартный «@import: ‘classes.less’;» работает вполне сносно. Если, тем не менее, вы импортируете другой файл LESS, то расширение файла будет опциональным. Следовательно, и «@import ‘classes’;» также будет работать хорошо. Если вы хотите импортировать что-то без этапа обработки в LESS, то вы можете использовать расширение .css (например, «@import: ‘reset.css’;»).

String Interpolation (Интерполяция строк)

Строчные данные также могут быть использованы в переменных и вызваны в пределах стиля посредством «@».

Escaping

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

javascript Evaluation (Определение javascript)

Это одна из моих любимых частей в работе с LESS: очень просто использовать javascript в стилях. Вы можете использовать выражения, а также обращаться к функциям среды разработки посредством обратного апострофа (`).

Форматирование на выходе

Хотя LESS не имеется настроек при выводе, Sass предлагает 4 версии вывода: ветвистая, компактная, сжатая и расширенная.

Эти две великолепные библиотеки разделяют много общего. Обе являются превосходными инструментами для дизайнеров, кто разрабатывает код, а также они могут помочь разработчикам работать более эффективно и быстрее. Если вы являетесь фанатом Ruby или HAML, то Sass точно вам подойдет. Как по мне (а я разработчик PHP и javascript), я придерживаюсь LESS, так как его гораздо проще интегрировать, а также осуществлять доступ к javascript-выражениям и атрибутам документа. Я сомневаюсь, что когда-либо прибегал к действительно серьезным навыкам программирования, пока разрабатывал таблицы стилей, но думаю, что стоит попробовать. Если вы пользовались обеими библиотеками, то мне бы хотелось услышать ваше мнение и советы! Наш ресурс всегда рад получать комментарии!

No related posts.