css амперсанд что значит
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
Grow sales with a smart marketing platform. Try Mailchimp today.
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:
Развёрнутое руководство по 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.
1 октября – 30 ноября, Онлайн, Беcплатно
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.
Что означает значок & и зачем он нужен? Объясняем за 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.
Как написать амперсанд от руки
Амперсанд отлично смотрится на открытках, пригласительных и ярлычках для подарков — Новый год уже не за горами. Немного практики, и вы наловчитесь писать красивые & от руки.
Зачем в Go амперсанд и звёздочка (& и *)?
Указатели
Про то, что такое и как устроены указатели я писал в статье «Как не наступать на грабли в Go», которую рекомендую к прочтению даже не новичкам в Go. Краткий повтор про указатели:
по сути, это один блок памяти, который содержит адрес другого блока памяти, где лежат данные. Если вы слышите фразу «разыменовать указатель», то это означает «найти данные из блока памяти, на который указывает этот адрес».
Вот визуализация из статьи:
Здесь Point <10, 20>это «литерал» — новая переменная, объявленная на месте, «блок памяти», а & — это «адрес этого блока памяти».
Тот же код, но запишем тип b явно:
здесь звёздочка означает «тип указатель на число». Но, если она используется не перед типом, а перед самой переменной, то значение меняется на обратное — «значение по этому адресу»:
Это может запутывать и сбивать с толку, особенно людей, никогда, не работавших с указателями, которых нет, например, в таких популярных языках как JavaScript или Ruby. Причём в языках вроде C и С++ есть ещё масса применений указателям, например «арифметика указателей», позволяющая вам прямо смещениями по сырой памяти бегать и реализовывать невероятно быстрые по современным меркам структуры данных. Ещё очень удобно переполнение буфера получать благодаря этому, создавая баги, приносящие ущерб на миллиарды долларов. Есть даже целые книги по тому, как понимать указатели в С.
Но если механика работы с указателями в Go относительно простая, остаётся открытым вопрос — почему «амперсанд» и «звёздочка» — что это вообще должно означать? Возможно это потому что символы рядом на клавиатуре ( Shift-7 и Shift-8 )? Ну а чтобы понять любую тему, нет способа лучше, нежели копнуть её историю.
История
А история такова. Одним из авторов Go был легендарный Кен Томпсон, один из пионеров компьютерной науки, подаривший нам регулярные выражение, UTF-8 и язык программирования B, из которого появился C, на базе которого, 35 лет спустя, появился Go. Вообще, генеалогия Go немного сложнее, но С был взят за основу по той простой причине, что это язык, который десятилетиями был стандартом для изучения программирования в университетах, ну и о его популярности в своё время, думаю, не нужно говорить.
И хотя сейчас Кен Томпсон отошёл немного от Go и летает на своём частном самолёте, его решения проникли в Go ещё задолго до Go. В юности он развлекался тем, что писал на завтрак новые языки программирования (слегка утрирую), и одним из языков, который был им создан вместе с ещё одной легендой компьютерной науки Денисом Ритчи, являлся язык программирования B (Би).
В то время Кен Томпсон написал операционную систему на ассемблере для компьютера PDP-7, который стоил 72000 долларов — а это примерно полмиллиона долларов сегодня — обладал памятью в 9 КБ (расширялась до 144КБ) и выглядел вот так:
Собственно, эта операционная система называлась Unics, и затем была переименована в UNIX. И когда зашла речь о переписывании её для нового крутого компьютера PDP-11, было принято решение писать на каком-то более высокоуровневом языке программирования. BCPL, который был предшественником B был слишком многословен — много букв. B был более лаконичен, но имел другие проблемы, которые делали его плохим кандидатом для портирования UNIX на PDP-11. Именно тогда Денис Ритчи и начал работать над новым языком, во многом основанном на B, специально для написания UNIX под PDP-11. Имя C было выбрано, как следующая буква алфавита после B.
Но вернёмся к теме об амперсанде и звёздочке. Звёздочка ( * ) была ещё в языке BCPL, и в B попала с тем же смыслом обозначения указателя, просто потому что так было в BCPL. Ровно по этой же причине перекочевали в С.
А вот амперсанд (&), означающий «адрес переменной», появился в B (и также перекочевал в С просто потому что), и был выбран по нескольким причинам:
Если я вас запутал, то вот нагляднее:
И тут нужно посмотреть внимательно на клавиатуры того времени. Чуть выше на картинке PDP-7 можно рассмотреть вводное устройство, коим являлся Телетайп 33. Стоит посмотреть на его клавиатуру повнимательнее, чтобы понять реалии того времени, и понять, с какими ограничениями сталкивались программисты и дизайнеры языков программирования в то время:
Как можно увидеть, ни тачбара, ни эмоджи не было :), и символы приходилось выбирать только из того набора, который был в телетайпе. Также, примечательно, что амперсанд и звёздочка тогда были не рядом, а на целых 4 клавиши порознь, что опровергает идею выбора амперсанда из-за близости клавиш. Собственно, из всех доступных клавиш, Кену Томпсону на тот момент больше всего приглянулся «амперсанд», похожий на «адрес».
Ну а дальше вы знаете — С стал языком века (прошлого), повлиял на огромное количество других языков, а книги по С стали настольными библиями программистов на несколько десятилетий. В таком же виде указатели вместе со звёздочкой и амперсандом попали и в С++ — ещё один язык мейнстримовый язык, на котором до Go писалась большая часть сетевого и серверного софта.
Поэтому решение включить указатели (без арифметики указателей, к счастью) в Go с тем же синтаксисом — было вполне логичным и естественным. Для С/C++ программистов это такие же базовые и простые понятия, как скобочки < и >.
И всё таки это удивительно осознавать, какое сильное влияние имеют исторические решения, принятые пол столетия назад на современные технологии.
Заключение
Если вы всё ещё неуверенно себя чувствуете себя с указателями в Go, запомните два простых правила:
Надеюсь, кому то это немного поможет лучше понимать смысл указателей и символов, стоящими за ними в Go.