SCSS — новая порция глазури от Sass / Хабр

Для меня Sass был настоящим открытием. Долгое время я мучался написанием чистого, или “vanilla” CSS. В случаях с маленькими сайтами все было прекрасно, но на больших проектах CSS быстро отбивается от рук. Отладка превращается в настоящий ночной кошмар.

Я познакомился с Sass и все изменилось. С Sass я мог разбить CSS на модули, чтобы упростить поиск проблем. Я мог использовать такие концепции программирования, как функции и переменные. А самое важное, я познакомился с миксинами.

Что такое миксины?

Миксины позволяют создавать переиспользуемые блоки CSS. Это помогает избежать дублирования кода. Например:

С использованием миксина Sass вы можете создать ссылки так:

Как подключить миксин

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

Как создать миксин

Создать миксин можно с помощью директивы @mixin. Например:

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

Переменные, определенные где-либо в Sass файле, можно использовать в миксине. Допустим, мы хотим использовать в миксине переменную $font-base.

Результирующий CSS:

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

Пример выше будет скомпилирован в следующий код:

Аргументы должны передаваться в миксин в том же порядке, в котором они были объявлены. Если мы попробуем поменять порядок аргументов в примере выше, получим:

Как вы можете видеть, это не работает. В качестве аргументов можно передавать переменные Sass. Например, можно передать переменную $base-color в пример выше:

Пример будет скомпилирован в следующий код:

Значения по умолчанию

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

Будет скомпилировано в:

Для первого h1 мы передали размер шрифта, и использовали значение по умолчанию для цвета. Во втором примере, значение по умолчанию будет заменено на переданный в директиве @include аргумент. Обратите внимание, что обязательные аргументы должны идти первыми. Также в качестве значения по умолчанию можно использовать переменную.

Имена аргументов

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

Этот пример будет успешно скомпилирован:

Переменные аргументы

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

Переменные аргументы позволяют передавать в миксин произвольное число параметров в виде списка. Выглядят они как обычные параметры с добавлением многоточия (…) в конце.

Будет скомпилировано в:

Вместе с переменными аргументами можно передавать и обычные. Например, в миксине pad мы хотим задать еще и цвет в миксине:

Будет сгенерировано:

Обычные аргументы должны идти перед переменными. Переменные аргументы можно использовать и при вызове миксина — передавать значения параметров в виде списка или объекта.

@content

В миксин можно передать блок правил с помощью директивы @content. В скомпилированном коде директива @content будет заменена на этот блок правил.

Теперь при вызове миксина мы можем передать дополнительные стили:

Заключение

Как вы видите, миксины в Sass очень полезны. Их использование может значительно ускорить рабочий процесс. Больше информации о том, как использовать миксины и Sass в целом, можно посмотреть на сайте sass-lang.com.

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

1. CSS и строчные комментарии

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

Sass дает возможность оставлять обычные CSS комментарии, начинающиеся с и заканчивающиеся .

В такие комментарии можно включать несколько строчек текста и останутся в том же виде в итоговом CSS. Поэтому SASS откоментированный следующим образом:

Преобразуется в следующий CSS:

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

После компиляции в CSS, в коде останется только многострочный комментарий:

2. Локальные и глобальные переменные

Управление пространством имен это один из самых сложных аспектов любого языка, SASS здесь не исключение. SASS позволяет создавать глобальные и локальные переменные и переопределять их при необходимости.

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

Сгенерированный CSS:

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

В сгенерированном CSS переменная примет новое значение:

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

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

3. Плэйсхолдеры для расширений

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

К счастью, SASS позволяет разработчикам расширять существующие селекторы, применяя весь набор стилей от одного селектора к другому с помощью команды . К примеру, следующий код применяет стили селектора к еще нескольким селекторам:

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

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

Этот код генерирует CSS без каких либо упоминаний или , но с применением их стилей:

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

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

В скомпилированном коде, переопределение экстенда в классе .notice не отражается:

4. Амперсанд для родительского селектора

Одна из базовых возможностей SASS, о которой узнают разработчики это амперсанд (&). Когда вы используете амперсанд перед селектором внутри набора правил, селектор прикладывается к родительскому, что особо удобно для псевдоклассов или . И код SCSS:

Дает следующий CSS:

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

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

Но с добавлением амперсанда мы делаем то же самое, не покидая пространство селектора :

И соответствующий CSS:

Вы видите, что сделала всего одна строчка с амперсандом? Sass заменил амперсанд родительским селектором, задав таким образом стили для внутри .

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

В этой статье мы продолжим изучение Sass и познакомимся в операторами.

Обратите внимание: примеры в данной статье реализованы для Ruby Sass. Я рекомендую взглянуть на статью, где обсуждаются вопросы совместимости движков Sass.

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

Sass использует двоеточие (:) для присваивания значения переменной. Например:

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

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

Список арифметических операторов, которые поддерживает Sass:

Оператор Описание
+ Сложение
Вычитание
* Умножение
/ Деление
% Остаток от деления

Как мы увидим в следующем разделе, оператор сложения (+) также может использоваться для конкатенации строк.

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

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

Символ / используется в сокращенной записи свойств в CSS. Например:

А Sass использует этот символ (/) для опреации деления. Рассмотрим, как Sass понимает этот символ:

В Sass учитывается приоритет операций:

  • Выражения в скобках вычисляются в первую очередь
  • Умножение (*) и деление (/) имеют больший приоритет, чем сложение (+) и вычитание (-).

Рассмотрим пример:

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

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

Sass поддерживает следующие операторы равенства:

Оператор Описание
== Равно
!= Не равно

Они поддерживаются для любых типов.

Давайте взглянем на два примера.

В первом примере мы используем оператор ==, чтобы проверить тип переменной $font и вывести соответствующее сообщение:

Скомпилируется в:

Во втором примере мы зададим список цветов и проверим длину каждого элемента в нем. Используя оператор получения остатка от деления (%), находим элемент нечетной длины и задаем этот цвет элементу h2:

Сгенерированный CSS:

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

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

Аналогично операторам равенства, операторы сравнения используются для сравнения чисел.

Sass поддерживает следующие операторы сравнения:

Оператор Описание
> Больше
>= Больше либо равно
< Меньше
<= Меньше либо равно

Пример:

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

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

Логические операторы позволяют проверить несколько условий в условном выражении.

Sass поддерживает следующие логические операторы:

Оператор Условия Описание
and x and y Истина, если оба выражения истинны
or x or y Истина, если x или y истинно
not x Истина, если x ложно

Рассмотрим их на примере.

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

Затем зададим условия для оценки его длины. Если все условия верны, элементу .btn добавим свойство background-color. Ниже показан код Sass для этого примера:

И сгенерированный CSS:

Как мы видим, логическое выражение возвращает true, поскольку обы условия, использованные в выражении (length($list-map) > 2 — length($list-map) < 5) истинны.

Обратите внимание на различия:

Строковые операторы

Как мы уже говорили, оператор сложения (+) предоставляет нам возможность конкатенации строк.

Вот основные правила:

  • Если сложить строку в кавычках (ту, что перед оператором +) cо строкой без кавычек, в результате получим строку в кавычках.
  • Если сложить строку без кавычек со строкой в кавычках, то получим строку без кавычек.

Рассмотрим следующий пример. Код Sass приведен ниже:

Сгенерированный CSS:

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

Результирующий CSS:

Операторы для работы с цветом

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

Давайте посмотрим как:

Сгенерированный CSS:

Как работают операции с цветом? Sass производит вычисления парами, т.е.:

Шестнадцатеричные значения представляют собой сочетания красного, зеленого и синего цветов.

Рассмотрим последний пример. Единственное отличие от предыдущего в том, что здесь мы используем rgba представление цвета.

Обратите внимание, что при использовании в выражении rgba или hsla представлений, значения альфа-канала должны совпадать. В противном случае, Sass выдаст сообщение об ошибке.

Заключение

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

Пожалуй, стоило бы затронуть тему «быстрого написания css-кода, разложенного по полочкам». Именно таким автору данной заметки видится sass — инструмент, позволяющий совершить волшебное преобразование: превратить рутинное написание css-кода в любопытное занятие.

Цель данного поста заключается не в том, чтобы объять необъятное и попытаться рассказать обо всём подробно, но в том, чтобы заинтересовать потенциального читателя, дабы в последующем ему захотелось разобраться с представленными здесь понятиями самостоятельно.

Но прежде, чем мы приступим к непосредственному разбору полётов…

Что пропустим

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

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

Тем, кто начинает делать свой проект и сам себе дизайнер совет: придерживайтесь стандартных рекомендаций. А именно: размер шрифта достаточный для того, чтобы читателю не приходилось испытывать неудобства, находясь на расстоянии 40см от монитора; заголовки — шрифт с засечками, основной текст — шрифт без засечек (хотя и здесь есть нюансы, зависит от величины шрифта); выравнивание текста по ширине остаётся спорным вопросом.

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

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

Введение

Что за зверь?

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

Раньше sass устанавливался только при помощи , а значит требовал предварительной установки ruby. Теперь это не требуется, если вы пользуетесь каким-либо сборщиком будть то grunt, gulp или webpack.

SCSS — так именуется Sass с 3-ей версии (Sassy CSS). Основным отличием от предыдущих версий является возможность писать на каноническом CSS. Также до третьей версии можно было писать код без скобок, но SCSS больше не приемлет этот синтаксис: это гарантирует, что обычный CSS будет корректно обработан в SCSS-файлах.

SASS и командная строка

Любители ruby часто используют связку sass + compass. Немного поговорим о ней, а затем начнём изучать особенности самого препроцессора.

Модуль Sass может быть использован как инструмент конвертирования в CSS в режиме командной строки. Он будет преобразовывать scss в css на лету. Этот вариант подходит тем, кто работает с ruby и не любит nodejs. Всем остальным рекомендуются к применению сборщики.

Указываем две директории: где лежат sass-файлы и куда складывать css:

Sass будет отслеживать изменившиеся файлы автоматически.

Для обратной конвертации нам понадобится :

Кроме того, на выходе можно получать сжатый css. Для этого при сборке следует указать определённый флаг:

Compass

Compass — CSS фреймворк, предоставляющий набор готовых подпрограмм для Sass. Он призван сделать вашу работу как можно более простой. В примере используется в основном для удобной сборки нескольких scss файлов в один файл css, хотя возможности у него огромные.

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

Вместо каталога под css создадим каталог с scss-файлами, который назовём . Рядом положим конфигурационный файл для того, чтобы указать compass’у расположение наших данных. Примерное содержимое:

В целом здесь всё ясно и без лишних слов. Тем не менее давайте немного пройдёмся по возможным опциям.

Опция Значение

project_path :stand_alone или :rails
http_path указание корневой директории проекта
http_path путь к проекту на веб-сервере
css_dir куда сохранять css-файлы
sass_dir где искать scss
output_style как именно хранить код (сжимать/не сжимать)
disable_warnings отключить предупреждения

При указанных выше настройках структура каталогов должна быть следующей:

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

Особенности SASS

Разделение кода

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

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

И соберём всё это в едином файле: :

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

Переменные

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

Вложенность

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

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

Символ равнозначен родительскому селектору.

Математика

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

Подпрограммы

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

Нужно принимать во внимание, что подпрограммы могут значительно увеличить объём css-файла, получаемого на выходе. Часто рекомендуется использовать для вычислений, но заменять их на (расширения) там, где есть переменные. И здесь без объяснений не обойтись.

Достаточно посмотреть на код, который получится на выходе. Обратимся к примеру:

Как это будет выглядеть при использовании наследования

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

Вот такой небольшой обзор. Теперь вы получили примерное представление о Sass, и, думаю, успели решить использовать его или нет. ⤧  Следующая записьНавигация по документу в LaTeX

Добавить комментарий

Закрыть меню