4 возможности Sass, которые вы не использовали
После того, как вы начинаете менять рабочее окружение для работы с SASS, нелегко расстаться с привычными рабочими стереотипами. Вам могут нравится возможности SASS и вы активно используете некоторые из них, не пытаясь освоить более продвинутые. На самом деле возможности SASS намного больше и применение более продвинутых фич дает вам большие преимущества.
1. CSS и строчные комментарии
Когда вы стилизуете страницу, вы можете включить комментарии в ваш CSS, чтобы те, кто будет работать с ней после вас сразу во всем разобрались. В зависимости от сложности и специфики вашего CSS эти комментарии должны решить проблему погружения в ваш код для любого человека через любое время и, возможно, этим человеком будете вы, вернувшись к проекту через длительное время.
Преобразуется в следующий CSS:
После компиляции в CSS, в коде останется только многострочный комментарий:
2. Локальные и глобальные переменные
Управление пространством имен это один из самых сложных аспектов любого языка, SASS здесь не исключение. SASS позволяет создавать глобальные и локальные переменные и переопределять их при необходимости.
В данном случае мы изменили значение глобальной переменной в локальном окружении. Поэтому любой следующий селектор будет получать значение первоначальное глобальное значение. А если поменять значение глобальной переменной вне селектора, например:
Это изменит значение этой переменной для всех использующих ее селекторов. Но это плохая идея, так как одна и та же переменная будет иметь разное значение для разных селекторов в зависимости от их расположения в коде. Учитывайте эти особенности, изменения глобальной переменной внутри селектора будет влиять только на этот селектор.
3. Плэйсхолдеры для расширений
Сохранение вашего SASS-кода чистым это благо для разработки. SASS позволяет вкладывать селекторы ради избежания повторения кода, но за это приходиться платить лишней вложенностью селекторов CSS. Создание миксинов отлично подходит для включения готовых наборов стилей к селекторам, но они чрезмерно увеличивают итоговый размер CSS. Обе эти техники удобны, но использовать их надо осторожно, чтобы сохранять свой CSS компактным и эффективным.
Но если вы хотите создать наборы стилевых правил и не хотите создавать отдельные селекторы в вашем CSS для них, SASS предоставляет вам плэйсхолдеры для селекторов. Они определяются также как и селекторы класса, только вместо точки в начале селектора используется символ процента. Образец:
Важно отметить, что расширение стилей при использовании глобальных переменных работает путем добавления селекторов к базовому стилю, а не дубликацией кода. Это значит, что первоначально значение глобальной переменной в экстенде будет действовать даже если ее переопределить локально:
4. Амперсанд для родительского селектора
Дает следующий CSS:
Мы сделали это, задав отдельное правило для этого случая. И если это потребуется сделать для нескольких случаев, это будет уже более утомительным занятием.
И соответствующий CSS:
Подумайте о том, как некоторые из этих идей могут вам помочь при разработке следующего проекта с Sass. Так как все это является частью ядра Sass, вы можете начать использовать это уже сейчас, получив возможность для более эффективной разработки.
The Sass Ampersand
Take your JavaScript to the next level at Frontend Masters.
The & is an extremely useful feature in Sass (and Less). It’s used when nesting. It can be a nice time-saver when you know how to use it, or a bit of a time-waster when you’re struggling and could have written the same code in regular CSS.
Let’s see if we can really understand it.
You can nest as deep as you’d like, but it’s a good practice to keep it only a level or two to prevent overly specific selectors (which are less useful and harder to override).
Adding another class
The & comes in handy when you’re nesting and you want to create a more specific selector, like an element that has *both* of two classes, like this:
The & always refers to the parent selector when nesting. Think of the & as being removed and replaced with the parent selector. Like this:
This can actually be thought of as short-hand for nesting with the & :
So, these two examples both compile to the same thing:
Using the & with pseudo classes
You can write pseudo classes on a class in a much less repetitive way with the & :
… which isn’t the same.
Using the & with >, +, and
Leaving the & ‘s out of the selector works here:
Both of these examples compile into this CSS:
Qualifying based on context
Nested selectors don’t necessarily have to start with the ampersand. You can qualify a selector by putting the & on the right.
We’re repositioning the parent selector exactly where we need it. This is really useful for qualifying a selector based on a different parent. This will compile to:
Meaning, select the button class only when a child of a body with a page-about class.
Tweaking the definition of the &
Think of the & as not only being replaced by the parent selector but as being replaced by the *compiled* parent selector.
Wacky but working example #1
Do not write selectors that look like this:
Wacky but working example #2
To mentally-compile this CSS, start at the top-most layer and work your way down pealing off the outer layers and replacing the & with the new compiled parent selector.
Here it is compiled:
I found I was using the & for something it wasn’t from time to time. The & doesn’t allow you to selectively traverse up your nested selector tree to a certain place and only use a small portion of the compiled parent selector that you want to use. I’ve wanted to do something like this before:
But that doesn’t work.
The & is always the fully compiled parent selector.
@at-root to the rescue
It’s worth mentioning that @at-root allows you to break out of your nesting structure entirely to the “root” of your nesting tree.
We’ve teleported out of the nesting tree to this compiled CSS:
This is nice. From an organizational perspective, all the code is still grouped together, which could be noted as an unsung benefit of nesting. @at-root can help keep specificity levels low because you no longer have the compiled parent selector to increase specificity. All the while still keeping your code conceptually organized with nesting:
There’s a few other use cases for the & that can be fun.
Doubling up specificity
Sometimes you need to beat-down the specificity of a 3rd-party CSS library to take ownership of the style:
The interpolation brackets # < >are needed as two touching ampersands are invalid Sass.
Modifying the ampersand
Even though you can’t have two ampersands touching without the interpolation brackets — as we demoed earlier in our pseudo class example — you can have another selector touch the ampersand. Touching the ampersand works well with modifier classes.
This can be quite useful if employing a naming methodology (i.e. BEM) which uses dash and underscore combinated classes rather than combined selectors.
The ampersand combined with nesting is a great feature. Once you know what it’s doing, authoring your Sass can become easier, faster, and less error-prone.
Here’s a couple of other articles specifically about the ampersand, for your reference pleasure:
Что означает значок & и зачем он нужен? Объясняем за 3 минуты
M&M’s, H&M. Откуда в английском появилась эта странная закорючка между буквами, как ее использовать и реально ли вообще нарисовать ее от руки. Рассказываем все самое интересное про & за три минуты.
Что означает & и как называется
Тогда эту закорючку и начали называть and per se and — то есть «непосредственно and». Постепенно and per se and превратилось в ampersand (амперсанд) — современное название.
Это правдивая версия происхождения. Но есть еще легенда: по слухам, символом злоупотреблял французский физик и математик Андре-Мари Ампер, отсюда и название Ampere’s and → ampersand.
Уже покорили английский алфавит и думаете, куда двигаться дальше? Ловите бесплатный личный план для новичков. Внутри советы и материалы, которые помогут вашему английскому перейти на новый уровень.
Откуда взялся амперсанд
Символ появился на полторы тысячи лет раньше своего названия — он встречается еще на древних граффити в Помпеях.
В латинском языке союз «и» звучит как et. Для удобства и экономии места буквы часто писали слитно, не отрывая руки, — в итоге получалось что-то похожее на &. В общепринятом типографском знаке трудно разглядеть «E» и «T», но посмотрите на другие варианты написания:
Как использовать амперсанд
Вы не встретите амперсанд в эссе, в статье The New York Times или в имейле. Сегодня он используется в основном в названиях компаний и брендов: H& M, Johnson & Johnson, Marks & Spencer, M& M’s.
В таких названиях and не проговаривается полностью, а теряет букву «D» — и превращается в [эн], например M& M’s читается [эм-эн-эмс].
Раз в год, 8 сентября, в National Ampersand Day, к символу отчасти возвращается былое величие. В этот день энтузиасты заменяют and в любых словах амперсандом: android — & roid, band — b&, grandma — gr& ma. Если настроены особо креативно, придумайте свой дизайн символа и запостите в инстаграм с хештегом #AmpersandDay.
Как написать амперсанд от руки
Амперсанд отлично смотрится на открытках, пригласительных и ярлычках для подарков — Новый год уже не за горами. Немного практики, и вы наловчитесь писать красивые & от руки.
Развёрнутое руководство по Sass/SCSS
Авторизуйтесь
Развёрнутое руководство по Sass/SCSS
Примечание Весь код Sass/SCSS компилируется в CSS, чтобы браузеры могли его понимать и корректно отображать. В настоящее время браузеры не поддерживают работу с Sass/SCSS или с любым другим препроцессором CSS напрямую, стандартная же спецификация CSS не предоставляет аналогичную функциональность.
Содержание статьи
Зачем использовать Sass/SCSS вместо 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.
SCSS — (.scss) Sassy Cascading Style Sheets.
Обратите внимание Другие препроцессоры функциональностью похожи на SCSS, но синтаксис может отличаться. А ещё, всё то, что работает в CSS, будет также прекрасно воспроизводиться и в Sass, и в SCSS.
Переменные
Переменные в Sass могут быть присвоены любому свойству.
Вложенные правила
Стандартные вложенные CSS-элементы с использованием пробела:
Те же вложенные элементы с помощью SCSS:
Как видно, синтаксис выглядит более чистым и менее повторяющимся.
Это особенно полезно при управлении перегруженными макетами. Таким образом, выравнивание, в котором вложенные свойства записаны в коде, полностью соответствует действительной структуре макета приложения.
За кулисами препроцессор всё ещё компилирует его в стандартный код CSS (показано выше), чтобы он мог быть отображён в браузере. Мы лишь изменяем способ написания CSS.
Амперсанд
С помощью символа & вы можете явно указать, где должен быть вставлен родительский селектор.
Результат компиляции Sass (из предыдущего примера) в CSS ниже.
В итоге амперсанд был компилирован в название родительского элемента a ( a:hover ).
Миксины (они же примеси)
Миксины могут также содержать селекторы, в том числе со свойствами. А селекторы могут содержать ссылки на родительский элемент через амперсанд ( & ), вы ведь помните про него?
Пример работы с несколькими браузерами
Миксины позволяют создавать группы деклараций CSS, которые вам придётся использовать несколько раз на сайте. Хорошей практикой будет использование миксинов для вендорных префиксов. Пример:
Арифметические операции
Как и в реальной жизни, вы не можете работать с числами, у которых несовместимы типы данных (например, сложение рх и em ).
Сложение и вычитание
Всегда обращайте внимание на тип складываемых данных. То есть пиксели к пикселям, слоны к слонам. Таким же образом работает вычитание, но со знаком минус.
Умножение
Деление
С делением дела обстоят немного сложнее, но разобраться можно, ведь в стандартном CSS косая линия (слэш) зарезервирована для использования краткой формы записи свойств. Пример ниже.
Есть три помощника, которые намекнут на возможность деления:
Результат компиляции в CSS:
Остаток
Остаток вычисляет остаток от операции деления. Ниже рассмотрим, как создать «зебру» для HTML-списка.
Создание миксина zebra показано во вставке кода сверху. Директивы @for и @if описаны в секции ниже.
Для создания образца надо написать несколько HTML-элементов.
Результат в браузере:
Зебра успешно сгенерирована миксином zebra
Операторы сравнения
После компиляции в CSS:
Логические операторы
Описание логических операторов
Использование логических операторов Sass для создания кнопки, у которой будет меняться фон в зависимости от её ширины.
Строки
В CSS определено 2 типа строк: с кавычками и без. Sass распознаёт и то, и другое. В итоге вы получите в CSS тот тип строк, который использовали в Sass.
В некоторых случаях можно добавить строки в допустимые значения CSS без кавычек, но только если добавленная строка является завершающим элементом.
Пример ниже демонстрирует, как делать не надо.
Можете складывать строки разных типов, если в них нет пробелов. Пример ниже не будет скомпилирован.
Строки, содержащие пробелы, должны быть отделены кавычками. Решение проблемы:
Пример сложения нескольких строк:
Сложение строк и чисел:
Операторы управления потоками
В SCSS есть функции ( function() ) и директивы ( @directive ). Чуть выше мы уже рассматривали пример функции, когда изучали передачу аргументов внутри миксинов.
Подобно JavaScript, SCSS позволяет работать со стандартным набором операторов управления потоками.
if() — это функция (и иногда основа искусственного интеллекта).
Её использование выглядит довольно примитивным: оператор вернёт одно из двух обозначенных в условии значений.
@if — это директива, использующаяся для разветвления на основе условия.
Проверка на наличие родительского элемента
В следующих примерах рассмотрим создание условных CSS-стилей в зависимости от наличия родительского элемента.
Директива @for
Директива @for выводит набор стилей заданное число раз. Для каждого повторения используется переменная-счётчик для изменения вывода.
Директива @for итерируется 5 раз.
Результат компиляции в CSS:
Директива @each
Результат компиляции в CSS:
Директива @while
Функции в Sass/SCSS
Используя Sass/SCSS можно использовать функции так же, как и в других языках.
Результат в браузере:
Функции в Sass могут возвращать любое корректное значение CSS и могут быть назначены любому свойству. Они даже могут быть рассчитаны на основе переданного аргумента.
Тригонометрия
Тригонометрические функции sin() и cos() часто встречаются в виде встроенных классов во многих языках, таких как JavaScript, например.
Их работу стоит изучать, если нужно сократить время, затрачиваемое на разработку анимаций пользовательского интерфейса, например для создания троббера. Мы, кстати, уже говорили об этом в одной из статей. Но в данном случае это будет код, а не gif-картинка, вставленная в HTML-документ.
Преимущество использования тригонометрии в сочетании с CSS выражается в отсутствии дополнительных HTTP-запросов, как это происходит с gif-изображениями.
Можно писать тригонометрические функции на Sass. Об этом читайте далее.
Написание собственных функций
Написание функций на Sass/SCSS очень похоже на написание функций в других языках.
Использование функции pow() :
Использование функции rad() :
Заключение
Как видите, CSS уже достаточно эволюционировал, чтобы порой заменять JavaScript. Это упрощает работу и экономит время. Кстати, загляните в одну из наших статей, в которой описаны возможности современного CSS.
Что значит двойной амперсанд (&&) в параметрах функции и как его использовать?
Перехожу в одиннадцатый стандарт из старого и в нем много нового для меня, в частности не понятно для чего в параметрах функций пишут двойной амперсанд &&. Неясно для чего он нужен и как его можно использовать?
Вот небольшой примерчик:
2 ответа 2
Пока читаете, для себя такое небольшое правило выработал:
т.е. просто внутри менять запрещаете.
Из правил вытекает использование: когда нужно отдать владение объектом. Возможна просто дополнительная перегрузка, чтобы можно было работать в одинаковом стиле в вызывающем коде как с rvalue, так и lvalue:
Передача по левосторонней ссылке ( Type& ). Это самый простой случай; копируется только указатель на объект (чем ссылка и является на самом низком уровне).
Передача по значению ( Type ). В этом случае компилятор создаёт полноценную копию объекта путём выделения памяти на стеке и вызова конструктора копирования.
И наконец, передача по правосторонней ссылке ( Type&& ). Здесь компилятор также выделяет место на стеке, однако вызывает уже конструктор перемещения, задача которого — «переместить» все данные из исходного объекта в новый, превратив первый в «пустышку» (безопасную с точки зрения отсутствия связи с данными нового объекта).
Почему «переместить» было написано в кавычках? Да потому, что по факту выполняется простое копирование с занулением оригинала.
Следом может возникнуть вопрос: если всё сводится к простому копированию с обнулением, почему нельзя обойтись старой доброй передачей по значению? Ведь можно предположить, что простого отбрасывания данных оригинала при его уничтожении вполне достаточно. Дело в том, что это верно не всегда. Класс может содержать указатели (как, к примеру, std::vector ) или дескрипторы внешних ресурсов (как std::fstream ). Если выполнить просто копирование экземпляров этих классов, то мы получим:
