Как создать и использовать в CSS переменные среды объяснение и примеры

Содержание материала:

Дополнительные статьи

Переменные в CSS

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

Стоит отметить, что хотя часто используется термин «переменные» (css variables), официально они называются custom properties (кастомные или настраиваемые свойства).

Определение переменных CSS должно начинаться с префикса — , например, —my-color . Они могут быть определены для любого элемента. Например:

Здесь в коде CSS для элемента div определены две переменныx: —text-color и —text-size

С помощью выражения var() мы можем ссылаться на эти переменные в любой части кода CSS:

В итоге первый блок получит высоту шрифта из —text-size, второй блок получит цвет шрифта из —text-color, а третий блок получит оба этих компонента.

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

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

Но если бы параграф находился бы вне блока div:

Тогда бы значения из переменных к нему бы не применялись:

Если же необходимо, чтобы переменные могли бы использоваться глобально для всех элементов, тогда их определяют для элемента :root

Резервные значения

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

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

Для второй переменной можно также определить резервное значение, если она некорректна:

Css и переменные

27.05.2015, 22:07

Переменные в css
Подскажите пожалуйста, возможно ли использовать css переменные в таком виде? И почему в консоли не.

CSS: Переменные и свойства
Как в переменную задать значение, например, свойства height класса cl_i? то есть у меня есть.

Плагин для css с возможностью создания переменных в css файле
Один раз наткнулся в интернете на интересный плагин для css, похожий на jquery для js. Там можно.

Gulp критичный css, инструмент для генерации критичного css
Пытаюсь закрыть последний пункт в googlespeed: «Удалите код JavaScript и CSS, блокирующий.

27.05.2015, 22:12 2 27.05.2015, 22:14 3 27.05.2015, 22:22 4
27.05.2015, 22:22
27.05.2015, 22:27 [ТС] 5
27.05.2015, 23:15 6

Creativchik, если вы сможете запилить инфраструктуру подобную этой: http://getbootstrap.com/customize

Попроще — если пропустить css через php скрипт с заменой ключевых слов.

Добавлено через 15 минут
LESS: программируемый язык стилей — с переменными.
Sass — с переменными.
Казалось бы, причём тут каскадные таблицы стилей (css).

27.05.2015, 23:48 7

Less и Sass — это процессоры, а не технологии! Less и Sass — позволяют писать css с помощью динамических конструкций и не более, на этом все их полномочия заканчиваются. Если бы Less и Sass позволяли работать с данными на сайте — и php и js можно смело отправлять в топку. А теперь ещё раз прочитайте тему: и задайте себе вопрос «при какой кухне тут css»?

Что такое системные и пользовательские переменные Windows?

Системные и пользовательские переменные среды всегда были сложной темой обсуждения для повседневных пользователей ОС Windows. Что они делают? В учебнике в интернете сказано добавить переменную PATH, но что это? Где я могу найти эти переменные? На все эти вопросы в ближайшее время будет дан ответ. Мы постарались дать вам общее представление о том, что такое системные переменные и переменные среды пользователя и как вы можете их использовать.

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

Что такое переменная среды

Переменная среды состоит из двух отдельных слов: «Среда» и «Переменная». Давайте сначала обсудим «переменную». Это означает, что сущность может хранить значение и варьироваться от компьютера к компьютеру. Windows предоставляет «Среду» для приложений для выполнения и выполнения операций, и именно это делает первое слово. Объединяя оба, переменные среды — это те динамические объекты, которые хранят значения, предоставленные средой. Теперь среда предоставляет значения, которые помогают другим программам получать важную информацию о системе. Как будто есть переменная окружения, называемая windir, которая соответствует каталогу, в котором установлена ​​Windows. Чтобы увидеть это в действии, откройте окно обозревателя и введите %windir% в адресной строке. Папка установки Windows откроется.

Точно так же вы можете ссылаться на каталог Windows, используя переменную ‘windir’ в других программах и скриптах. Существует множество других переменных, к которым можно получить доступ, «TEMP» или «TMP» — это переменная, которая указывает на каталог, в котором хранятся все временные файлы. Самая популярная переменная Path — это та, которая указывает на каталоги, содержащие исполняемые файлы. Так что вы можете запустить программу из командной строки в любом другом каталоге. Мы объяснили путь позже в этом посте. Все эти переменные пригодятся, когда вы что-то разрабатываете или часто используете оболочку.

Что такое переменные среды системы и пользователя

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

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

Как добавить и изменить переменные среды

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

Щелкните правой кнопкой мыши значок «Этот компьютер» и выберите «Свойства».
Теперь в этом окне выберите «Расширенные настройки системы» в левой части.
Нажмите последнюю кнопку с надписью «Переменные среды», чтобы открыть наше предназначенное окно.

Как только вы откроете это, вы сможете просматривать пользовательские и системные переменные отдельно. Имя переменной находится в первом столбце, а ее значение — во втором. Соответствующие кнопки под таблицей позволяют вам «Добавить», «Редактировать» и «Удалить» эти переменные.

Использование переменной Path

Путь является наиболее используемой переменной среды. Как я уже упоминал, он указывает на каталоги, которые содержат исполняемые файлы. После того, как вы правильно настроили переменную Path, вы можете использовать эти исполняемые файлы из любой точки системы. Давайте попробуем понять это на примере. Откройте окно переменных среды и найдите «Путь» в системных переменных.

Нажмите «Изменить», а затем нажмите «Новый», не играя с другими элементами управления прямо сейчас. Теперь нажмите кнопку обзора и выберите папку, в которой находится нужный исполняемый файл. Нажмите «ОК» и сохраните все. Я добавил исполняемый файл ‘Visual Studio Code’ в путь.

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

Список всех переменных среды

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

Динамические переменные среды

В отличие от обычных переменных, динамические переменные среды предоставляются CMD, а не системой. Вы не можете изменять значения этих переменных, и они расширяются до различных дискретных значений при запросе. Мы обычно используем эти переменные для пакетной обработки, и они не хранятся в среде. Даже команда «SET» не покажет эти переменные. Некоторые из динамических переменных среды:

Некоторые из динамических переменных среды:

  • %CD%: ввод этой команды даст вам текущий каталог, в котором вы работаете.
  • %DATE%: эта переменная будет отображать текущую дату в соответствии с настройками формата даты.
  • %TIME%: аналогично, оно показывает текущее время в соответствии с настройками формата времени.
  • %RANDOM%: эта переменная печатает случайное число .
  • %ERRORLEVEL%: определяет уровень ошибки, установленный последней выполняемой командой.
  • %CMDEXTVERSION%: эта переменная распространяется на версию расширений командной строки.

Это было в значительной степени о системных и пользовательских переменных среды в Windows. Windows имеет гораздо больше переменных — не забудьте проверить их с помощью команды «SET».

Начинаем работать с переменными CSS — часть 1

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

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

Эта заметка предназначена для front-end разработчиков среднего уровня (или дизайнеров, способных писать код). Предполагается, что у вы знакомы с CSS, HTML и немного с JavaScript.

Что такое переменные (или CSS переменные)?

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

Общий синтаксис для переменных CSS показан ниже:

Объявление переменной начинается с символов — — префикса, за которым следует имя переменной. Переменная будет доступна в .CSS-файле или .HTML-файле (при использовании инлайн-стилей) совместно с функцией var . Например, переменная с именем “color” и значением “blue” может быть объявлена как —color: blue и может быть доступна как var(—color) .

Не путайте с синтаксисом JavaScript. В JavaScript var используется для объявления переменных, а в CSS var используется для доступа к значению переменной.

Давайте рассмотрим пример, представленный ниже:

Мы объявили 2 переменные с именами —color-dark и —color-bright . Далее мы обращаемся к ним и получаем значение обеих переменных в классах bright и dark . CSS-переменные можно использовать следующим образом: вместо того, чтобы указывать одни и те же значения CSS-свойств многократно, мы просто ссылаемся на переменные.

Какие проблемы возникают с переменные CSS или пользовательскими свойствами?

Давайте рассмотрим преимущества использования CSS-переменных.

  • Масштабируемый и читаемый код
    При использовании традиционного CSS, мы довольно часто повторяем значения свойств. Это делает наш код не только «топорным», но и трудночитаемым, а также его становится сложно поддерживать при увеличении его объема.
  • Реактивные элементы
    Однажды нам может понадобиться изменить значение переменной, в тот же момент соответствующие HTML-элементы обновятся и поменяют свой внешний вид в соответствии с новыми значениями переменной, что мы увидим в браузере.
  • Ускорение рабочего процесса
    CSS переменные позволяют немного ускорить процесс разработки. Если значение свойства требуется поменять, нам будет нужно всего лишь изменить значение переменной. На это уйдет меньше времени, чем на поиск в коде каждого упоминания свойства и его замену.
  • Продвинутые математические расчеты
    Вы можете выполнять базовые вычисления с использованием основных математических операторов в CSS, используя функцию calc() . Функции calc() может быть передан только 1 параметр с двумя операндами и одним оператором, результат выполнения становится значением свойства CSS. Поддерживаются основные математические операции: сложение(+) , вычитание(-), умножение(*) и деление (/).

Общий синтаксис функции calc() : calc(Операнд1 [Оператор] Операнд2);

Хорошо, что операндом функции calc() может быть CSS переменная. Это делает функцию calc() еще более динамичной и полезной.

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

Но почему нет? В наши дни люди отправляют экспедицию на Марс, так что по крайней мере вы должны быть тем либералом работы с кодом.

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

Переменные как основа архитектуры CSS при работе с препроцессорами

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

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

В наши дни разработка CSS без препроцессоров считается плохой практикой. Результаты этого подхода не всегда хорошие. Изображение: SXSW

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

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

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

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

Что является основой препроцессора?

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

Хотя эта статья в основном о переменных препроцессоров, мы коснемся и нативных переменных CSS. Я рассчитываю, что вы знакомы с Sass, LESS, Stylus или PostCSS — в этой статье все примеры и демонстрации реализованы на Sass.

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

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

  • “Добавить ли это свойство к глобальным переменным или вынести в файл с базовыми стилями?”
  • “Почему это находится в файле с раскладкой? Может лучше переместить в файл, содержащий сетку?”
  • “Сделать из этого класс, миксин, расширение или все вместе?”

Атомы для одного это молекулы для другого, даже если вы тщательно следуете методике атомарного дизайна, созданной Брэдом Фростом и Дэйвом Олсеном.

Следующий сценарий: вы встретили миксин, написанный разработчиком А, включающий миксин для вендорных префиксов от разработчика В, добавленный в определенной точке; расширение из другого фрагмента (добавленное разработчиком A по принципу DRY), а также две переменные, заданные в разных файлах…

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

Хранение переменных CSS

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

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

Когда надо создавать переменную?

Если значение появляется в стилях не один раз, то, скорее всего, двумя появлениями дело не ограничится. Также, если есть шанс, что значение (цвет, длина, размер и т.д.) будет обновляться, стоит создать новую переменную.

Ниже показан общий пример использования переменной для хедера, зафиксированного в области просмотра:

Как видно из демо, переменная $height-header используется для задания высоты хедера, триггера меню и поля поиска, а также верхнего пэддинга элемента body . И обновление этого кода будет простым.

Также отметьте, как переменная $height-footer интерполируется для получения минимальной высоты элемента main , при этом используется синтаксис # <$variable-name>, позволяющий Sass в момент компиляции подставить на это местно нужное значение (40 пикселей).

Ограничивайте количество миксинов и расширений самым необходимым

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

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

Пишите чистый CSS в случаях, когда абстракция лишь вносит путаницу

Используйте миксины или расширения для общеизвестных приемов

Если миксин в глобальных стилях не требует аргументов, замените его переменной

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

Используйте локальные переменные только по необходимости

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

  • В разных препроцессорах переменные обрабатываются по-разному. Например, в Sass есть возможность задавать переменным значения по умолчанию с помощью флага !default . А в LESS есть возможность “ленивой загрузки” переменных.
  • Убедитесь, что вы понимаете область видимости переменной. Об этом есть отличная статья Джорджа Марцукоса.
  • Очень легко неумышленно создать две локальные переменные с одним именем, в двух разных блоках кода или миксинах. Хотя это и не проблема (переменные ограничены зоной видимости), это может вызвать затруднения с номенклатурой переменных в долгосрочной перспективе.
  • Если у вас несколько локальных переменных с одинаковыми значениями, подумайте об их замене на одну глобальную переменную. Вот образец:

Нарушайте правила: зачастую собственные миксины и плейсхолдеры бывают полезны

Переменные: создаем их без фанатизма

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

Думайте перед созданием новой переменной

Нужно ли создавать новую переменную для базового цвета ваших кнопок (например, $button-color-base )? Нет, до тех пор пока у вас не появится отдельная причина сделать это, например, если вы пишете огромное приложение или фреймворк и хотите, чтобы у людей была возможность переписывать это значение (в Bootstrap 3-ей версии используется @btn-default-color в файле buttons.less ). А так почему бы просто не использовать $color-brand-1 или другой имеющийся цвет для кнопок.

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

Рассмотрим это на примере. Базовый класс notify и дополнительные классы-модификаторы notify—success , notify—info и notify—error .

Почему бы не задать эти цвета в разделе для цветов файла с переменными и не добавить их потом к классам notify ?

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

При использовании переменной подумайте, может вам хватит нативных CSS-значений?

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

Примечание: значение inherit работает во всех браузерах, а currentColor во всех браузерах, кроме Internet Explorer 8-. В Safari есть баг с currentColor .

Ниже показан общий случай использования ключевого слова inherit :

В следующем примере в псевдоэлементе (треугольник) используется currentColor :

Неправильное повторное использование переменных

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

Способы именования переменных

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

  • Обеспечивайте согласованность иерархии при именовании (например, $font-primary , $heading-primary или же $font-family-1 , $heading-1 и т.д. ).
  • Используйте суффиксы base или default там, где это имеет смысл (например, $color-font-base , $box-shadow-base и т.д.).
  • Группируйте схожие переменные с помощью общих ключевых слов ( $font-family-1 , $font-size-base , $font-bold и т.д.).

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

Более описательный, но с ограничениями

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

Просто описательный, с меньшими ограничениями

Он кажется интуитивным, потому что вы можете поменять значения для шрифтов с засечками и без засечек без дополнительных усилий (т.е. просто заменить Roboto на San Francisco или другой шрифт без засечек). Однако переменная $font-serif потеряет свой смысл, если в будущем нее поместить шрифт без засечек.

Скорее сравнительный, чем описательный

Смысл этого метода в создании иерархии шрифтов в вашем проекте. В данном случае пример немного вымученный, и переменные типа $font-quaternary и $font-quinary могут слегка выжрать вам мозг. Конечно, всегда надо стремиться использовать минимальное количество кастомных шрифтов, но в проекте может произойти и не такое.

Немного описательный, немного сравнительный

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

Распространенные переменные для веб-приложения

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

Переменные для измерений

Названа ли переменная, исходя из ее связи с определенным элементом, даже если она влияет на другие элементы? Возьмем наш прошлый пример с высотой хедера — ее имя привязано к селектору (например, $header-height или лучше $height-header ).

Я предпочитаю $height-header вместо $header-height , потому как это значение высоты хедера, которое используется для задания высоты и внутренних отступов у других элементов.

Вы могли уже заметить в примерах выше, что я часто называю переменные, привязывая их к измерениям (по типу $ — ). В моем файле с переменными, я группирую такие переменные в отдельный раздел. Если вы предпочитаете другой метод именования, убедитесь, что применяете его последовательно.

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

Переменные для пространства: внутренние и внешние отступы

Я обычно создаю одну базовую переменную $spacing и использую ее для внутренних и внешних отступов.

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

С другой стороны, вы можете использовать и более специфичные переменные типа $spacing-padding и $spacing-margin .

Избегайте использования переменных для пространства с абсолютно позиционированными элементами. Изменение глобальных значений переменных будет влиять на эти элементы.

Переменные для цвета

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

Я нахожу эту систему элегантной и выразительной. Но если вас тянет к именам типа “grey-lightest-xx” (или еще хуже “grey-darker–1x”), можете работать и с такими именами.

Я также разделяю несколько брендовых цветов, особенно для больших приложений. С двумя брендовыми цветами (например с бирюзовым и красно-коралловым) я использую имена переменных $color-brand-1 и $color-brand-2 . Такие вещи я обычно обсуждаю с другими разработчиками, участвующими в проекте: некоторые из них предпочтут названия типа $red , но возможность легко изменить брендовый цвет их убеждает. Кроме того, кто-то может привести в качестве контраргумента то, что в большом проекте должно быть руководство по стилю, которое устраняет подобные проблемы. На самом деле при работе над руководством по стилю я предпочитаю не ставить значения в HEX, RG или HSL, а использовать имена переменных.

Переменные для z-index

В больших приложениях обычно встречается несколько элементов, создающих контекст наложения. Модальные окна и наложения, подсказки и предупреждения, выпадающие и скрытые за холстом меню, фиксированные хедеры и футеры — у всех у них есть z-index , в диапазоне от негативного до плагинного уровня (от 9999 и больше).

Крис Койер предлагает использовать переменные для z-index, создавая новый файл Sass или использовать ассоциативный массив Sass. А Хьюго Жирадель предлагает решение с использованием функции и карт Sass.

Меня устраивает помещение переменных для z-index в файл _variables.scss .

Учитывайте, что плагины от сторонних производителей часто используют z-index. Я создаю для них новые переменные, например:

Переменные для border-radius

Для всех приложений мне хватало трех размеров скругленных уголков:

Ранее я использовала переменную $border-radius-circle со значением 50% , пока здравый смыл не подсказал мне, что это пустая трата усилий. Вы всегда может нарисовать круг с помощью border-radius: 50% — просто напишите border-radius: 50% в своих стилях.

Переменные для типографики

При их именовании полезно использовать префикс font- .

Вот несколько переменных, которые я использую для шрифтов:

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

Жирность шрифта это несколько иное. Вот скриншот с Google Fonts с различными вариантами жирности шрифта Exo:

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

Я часто вижу в различных проектах переменные, созданные для разных степеней жирности и стилей шрифтов, использующие набор правил @font-face , то есть в действительности для разных шрифтов. У нас есть возможность избежать этого и переработать наши переменные, управляющие жирностью, для достижения того же эффекта.

Взглянем на пример со шрифтом Amble, сгенерированный с помощью сервиса Font Squirrel. Мы используем только обычное и жирное начертание и только формат WOFF, поддерживаемый в современных браузерах.

Давайте рассмотрим решение по работе с кастомными шрифтами, в котором нет излишней абстракции:

Переменные для иконочных шрифтов

Переменные для медиа-запросов

Для приложений со сложными контрольными точками, стоит использовать библиотеку include-media, написанную Эдуардо Букасом и Хьюго Жираделем.

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

Нативные переменные CSS

Они еще не вполне годны для использования на продакшене (на данный момент их статус кандидат в рекомендации), но переменные CSS это шаг в нужном направлении, несмотря на их слегка многословный синтаксис.

Учитывайте, что когда мы используем термин “переменные CSS”, мы ссылаемся на пользовательские свойства, которые определяют переменные, через ссылки с помощью нотации var(). Синтаксис для пользовательских свойств может измениться в будущем.

Пользовательские свойства на данный момент поддерживаются только в Firefox, в Chrome они находятся на стадии разработки, а в Edge на стадии рассмотрения.

Ниже пример с использованием пользовательских свойств CSS:

А вот как мы можем определить пользовательские свойства, которые можно использовать глобально:

Пользовательские свойства можно каскадировать, вы можете проверить это на демонстрации (работает только в Firefox):

Вот некоторые из преимуществ нативных переменных перед переменными из препроцесоров:

  • В статье Питера Гастона обсуждается, как пользовательские свойства CSS могут быть доступны с помощью JavaScript (метод setProperty() в объекте стилей). Вы можете поэкспериментировать с его демонстрацией в Firefox.
  • Переменные CSS можно использовать непосредственно внутри SVG для стилизации свойств SVG через презентационные атрибуты типа fill и stroke . Это можно посмотреть в демо, разумеется, пока что только в Firefox.

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

8 советов, которые помогут вам правильно составлять Sass

С помощью Sass создаются синтаксически безупречные таблицы стилей ( Syntactically Awesome Style sheets ), или, по крайней мере, предполагается, что он должен это делать.

При эффективном использовании Sass помогает задать масштабируемый и краткий CSS . При неправильном использовании Sass может реально увеличить размер файла и добавить ненужный или дублированный код.

Ниже приводится ряд полезных советов, которые помогут вам извлечь из Sass максимум пользы…

1. Структурируйте Sass

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

Файлы частичных шаблонов создаются с помощью символов нижнего подчеркивания и не выносятся в отдельные CSS -файлы. Каждый частичный шаблон должен импортироваться с помощью основного Sass -файла ( global.scss ), расположенного в корневой папке Sass .

Вот пример структуры папок, который иллюстрирует этот принцип:

Такая структура папок обеспечивает простую работу с ней сайта, а также добавление новых файлов. Например, новые модули могут быть легко добавлены в папку модуля и затем к global.scss с помощью @import .

Чтобы продемонстрировать это, ниже приводится пример файла global.scss :

2. Используйте переменные Sass более эффективно

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

Вот некоторые советы по эффективному применению переменных:

  • Назначайте переменным понятные имена;
  • Применяйте и придерживайтесь конвенции назначения имен ( Модульной, BEM и т.д .);
  • Убедитесь, что использование переменной оправдано.

Вот несколько примеров эффективного использования:

3. Используйте меньше примесей

Примесь — это отличный способ включить раздел кода несколько раз в пределах сайта. Тем не менее, включение примеси это то же самое, что копирование и вставка стилей в файл CSS . Это создает массу дубликатов кода и может привести раздуванию CSS -файла.

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

Примесь rounded-corner может быть использована в любой ситуации, для этого просто нужно изменить значение $arc, тогда ее стоит использовать:

Пример неэффективного использования примеси может выглядеть вот так:

Эта примесь не имеет аргументов и, следовательно, лучше применить заполнитель, что вплотную подводит нас к пункту 4 .

4. Включайте заполнители

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

И компилируемый CSS :

Повторяющийся код в заполнителях выводится только один раз и только для уникальных стилей, применяемых к отдельным селекторам. Если они не используются, стили заполнителей не выводятся вовсе.

Учитывая сказанное в пункте 3 , заполнители можно использовать наряду с примесями, что позволит уменьшить количество дублированного кода и в то же время сохранить гибкость, обеспечиваемую примесями…

5. Используйте для вычислений функции

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

Например, функции полезны для расчета ширины в процентах от конкретного элемента:

6. Поддерживайте порядок и хорошую организацию

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

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

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

7. Ограничивайте количество вложений

Чрезмерное использование вложенных правил Sass может стать причиной различных проблем, от слишком большой сложности кода и до сверх специфичности и перекоса в сторону HTML -структуры страницы. Это может привести к дальнейшему увеличению количества проблем и необходимости включения !important , чего по возможности следует избегать.

Вот некоторые золотые правила для вложений:

  • Никогда не разветвляйте структуру более 3 уровней вниз;
  • Убедитесь, что CSS на выходе чист и пригоден для повторного использования;
  • Используйте вложение, когда на то есть причины, а не в качестве опции по умолчанию.

8. Старайтесь делать все проще

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

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

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

Вывод

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

Данная публикация представляет собой перевод статьи « 8 Tips to Help You Get the Best out of Sass » , подготовленной дружной командой проекта Интернет-технологии.ру

Использование переменных в CSS

На этой странице

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

CSS переменные (пользовательские CSS-свойства) это сущности, определяемые автором CSS, хранящие конкретные значения, которые можно повторно использовать в документе. Они устанавливаются с использованием custom property нотации ( например. —main-color: black; ) и доступны через функцию var() ( например. color: var(—main-color); ) .

Сложные веб-сайты имеют очень большое количество CSS, часто с множеством повторяющихся значений. Например, один и тот же цвет может использоваться в сотнях разных мест, что требует глобального поиска и замены, если этот цвет необходимо изменить. CSS переменные позволяют сохранять значение в одном месте, а затем многократно использовать его в любом другом месте. Дополнительным преимуществом являются семантические идентификаторы. Для примера: запись —main-text-color более понятна, чем #00ff00 , особенно если этот же цвет используется и в другом контексте.

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

Основное использование

Note: В более ранней спецификации префикс для переменных был var- , но позже был изменен на — . Firefox 31 и выше следуют новой спецификации.(баг 985838)

Первый шаг с CSS Переменными

Начнем с этого простого CSS, который окрасит элементы разных классов одинаковым цветом:

Мы применим его к этому HTML:

что приводит нас к этому:

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

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

Наследование переменных в CSS и возвращаемые значения

Пользовательские свойства могут наследоваться. Это означает, что если не установлено никакого значения для пользовательского свойства на данном элементе, то используется свойство его родителя:

со следующим CSS:

В результате var(—test) будет:

  • для элемента с классом : 10px
  • для элемента с классом : 2em
  • для элемента с классом : 10px (унаследовано от родителя)
  • для элемента с классом : недопустимое значение, что является значением по умолчанию для любого пользовательского свойства.

Используя var() вы можете объявить множество возвращаемых значений когда данная переменная не определена, это может быть полезно при работе с Custom Elements и Shadow DOM.

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

В замещаемых значениях можно использовать запятые по аналогии с пользовательскими свойствами. Например, var(—foo, red, blue) опеределит red, blue как замещающее значение (от первой запятой и до конца определения функции)

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

Обоснованность и полезность

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

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

Совместимость с браузерами

Особенность Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Базовая поддержка (Да) -webkit
33.0
Нет 34.0 [2]
49.0
(Да) 29 (29) [3]
31 (31)
Нет 36.0 9.1
Особенность Android Android Webview Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Базовая поддержка Нет 49.0 (Да) 29 (29) ? ? 9.1 49.0

[1] Chrome initially implemented this feature using a different syntax, which required to prefix custom property names with -webkit-var- to define them. They could then be used unprefixed within a -webkit-var() function. Additionally, the implementation was hidden behind the Enable experimental WebKit features flag under chrome://flags , later renamed to Enable experimental Web Platform features.

[2] В Chrome 34.0 убрали эту функцию из-за проблем с производительностью.

Возможности CSS, которые вам понравятся в 2015

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

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

CSS-селекторы четвёртой версии

Спецификация селекторов третьей версии хорошо реализована в браузерах и предоставляет нам такие полезные селекторы, как :nth-child . Четвёртая же версия даёт нам гораздо больше способов разметить контент при помощи CSS.

Отрицающий псевдокласс not

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

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

Псевдокласс has

Этот псевдокласс принимает список селекторов в качестве аргумента и CSS-свойства будут применяться, если любой из переданного списка селекторов найдёт подходящий элемент. Лучше посмотреть на примере. Здесь каждому элементу a , который содержит в себе изображение, будет нарисована чёрная рамка:

Во втором примере я совмещаю :has и :not и выбираю только те элементы li , которые не содержат элемент p :

Псевдокласс совпадения matches

Этот псевдокласс означает, что мы можем применить правила к группе селекторов, например:

Чтобы проверить, поддерживает ли ваш браузер эти селекторы, вы можете использовать css4-selectors.com. Там же вы можете узнать больше о новых селекторах.

Режимы наложения в CSS

Если вы знакомы с режимами наложения в фотошопе, тогда, возможно, вас заинтересует спецификация смешивания и наложения. Эта спецификация позволяет нам применять режимы наложения к фонам и любым HTML-элементам прямо в браузере.

В приведённом ниже CSS у меня есть контейнер с фоновым изображением. Добавляя цвет фона и устанавливая background-blend-mode в значения hue и multiply , я могу применить интересный эффект к изображениям.

Свойство mix-blend-mode позволяет наложить текст поверх изображения. В примере ниже у меня есть заголовок h1 и затем в .box2 я устанавливаю mix-blend-mode: screen .

Режимы наложения в CSS на удивление хорошо поддерживаются современными браузерами, за исключением Internet Explorer. background-blend-mode и mix-blend-mode доступны в Safari и Firefox, в качестве экспериментальной опции в Opera и Chrome. При осторожном использовании это как раз тот вид спецификации, с которым можно поиграться, чтобы усовершенствовать ваш дизайн, при условии, что будет запасной вариант для браузеров не поддерживающих эту возможность.

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

Узнайте больше об использовании режимов наложения в статье на CSS Tricks, на сайте Adobe и Dev Opera.

Функция calc

Функция calc() является частью модуля CSS-значений и единиц измерения третьей версии. Она даёт возможность выполнять математические вычисления прямо в CSS.

В качестве простого примера можно использовать calc() для расположения фонового изображения относительно нижнего правого угла элемента. Чтобы расположить на расстоянии 30px от верхнего левого угла, вы должны использовать:

Однако, вы не сможете этого сделать относительно правого нижнего угла, если не знаете размеров контейнера. Функция calc() означает, что вы можете вычесть 30 пикселей из стопроцентной ширины или высоты:

В современных браузерах calc() хорошо поддерживается, хотя использование для вычисления позиции фона в IE9 приводит к падению браузера.

CSS-хитрости и функция calc() — забавная статья об использовании calc() для решения проблем CSS. Вот несколько простых кейсов на CSS Tricks.

CSS-переменные

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

CSS-переменные, описанные в первой версии модуля пользовательские CSS-свойства для каскадных переменных, приносят эту функциональность в CSS.

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

Посмотреть больше примеров и узнать подробности вы можете в статье на Mozilla Developer Network.

CSS-исключения

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

Исключения позволяют окружить текстом позиционируемые элементы со всех сторон. Само по себе оно не определяет новый метод позиционирования и может быть использовано только в соединении с другими методами. В приведённом ниже примере я абсолютным позиционированием располагаю элемент, затем определяю его как исключение, задавая свойство wrap-flow и его значение both , после чего текст начинает воспринимать позицию элемента и обтекает его со всех сторон.

Исключения в Internet Explorer

Поддержка браузерами исключений и wrap-flow: both сейчас ограничена IE10+, требующим префикс -ms . Обратите внимание, что исключения до недавнего времени были связаны со спецификацией CSS-фигур, которую я рассмотрю ниже, так что часть информации может пересекаться.

CSS-фигуры

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

В первой версии спецификации CSS-фигуры определяются новым свойством shape-outside . Оно может быть использовано на плавающем элементе. В примере ниже я использую shape-outside чтобы изогнуть текст вокруг обтекаемого изображения.

CSS-фигуры позволяют нам изогнуть текст вокруг изображения воздушного шара

Фигуры поддерживают Chrome и Safari, это означает, что вы можете начать использовать их для устройств с iOS. Во второй версии спецификации вы сможете придавать форму тексту внутри элементов при помощи свойства shape-inside , а с этим придёт много интересных возможностей.

Вы можете узнать больше о фигурах в статьях (один и два) на A List Apart.

CSS-сетки

Самую интересную тему я оставил напоследок. Я большой фанат появления спецификации по сеткам с момента первой реализации в Internet Explorer 10. CSS-сетки предоставляют нам способ создавать при помощи CSS структурные сетки и размещать на них наш дизайн.

Сетки дают нам метод для создания структуры, которая не отличается от использования таблиц для разметки. Однако, описывая сетки в CSS, а не в HTML, мы можем создавать макеты, которые могут быть изменены при помощи медиавыражений в зависимости от контекста. Это позволяет разделить порядок элементов в коде от их визуального представления. Для дизайнеров это означает, что вы можете свободно изменять позицию элементов на странице для лучшего представления макета на разных контрольных точках, и не нужно идти на компромисс между разумно структурированным документом и вашим адаптивным дизайном. В отличие от макетов, основанных на HTML-таблицах, вы можете наслаивать элементы в сетках. Так что, если потребуется, один элемент может перекрывать другой.

В примере ниже мы объявляем сеткой элемент с классом .wrapper . Он содержит три колонки с шириной в 100px , отступом в 10px между ними и три строки. Мы располагаем контейнеры внутри этой сетки, используя номера линий до и после, выше и ниже той области, где мы хотим расположить элемент.

Пример сетки в Chrome

Поддержка браузерами последней спецификации сеток ограничена Chrome с отметкой «экспериментальная возможность». Существует приличная реализация начальной версии спецификации в Internet Explorer 10 и выше.

Узнать больше о сетках вы можете на моём сайте Grid by Example, где можно увидеть несколько примеров сеток, которые работают в Chrome с включёнными экспериментальными возможностями. Я также делал доклад на CSS Conf EU по сеткам и вы можете посмотреть это видео на YouTube.

У вас есть любимая новая спецификация, не рассмотренная здесь?

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

Как работают псевдоклассы в CSS. Подробное объяснение с примерами и диаграммами

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

Прим. перев. Псевдоклассы предназначены для изменения стиля существующих элементов страницы в зависимости от их динамического состояния, например, при работе со ссылками ( :link , :visited , :hover , :active , :focus ).

В этой статье мы познакомимся с двумя типами псевдоклассов:

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

Разметка и DOM-дерево

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

А теперь давайте преобразуем этот код в нечто, понятное визуально и интуитивно — в DOM-дерево.

Давайте рассмотрим подробнее элемент body . В нём расположено 3 дочерних элемента: main и два элемента .

На схеме представлено отношение между body и дочерними элементами.

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

«КРОК», Москва, Троицк, Санкт-Петербург, Нижний Новгород, Самара, Иркутск, Пермь, Краснодар, Воронеж, Челябинск, от 120 000 до 240 000 ₽

Теперь давайте посмотрим на div-контейнер с классом main :

Псевдокласс only-of-type (единственный из выбранного типа)

Для всех псевдоклассов действует один и тот же формат:

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

В приведённом выше фрагменте кода выбираемый элемент — тег , а его селектор — one-of-type .

Данный пример можно изучить в работе на codepen.io. Уберите символы комментариев, чтобы посмотреть, как работает тот или иной селектор, а лучше продолжите чтение статьи, чтобы не запутаться.

Начнём с того, что выберем всё, что есть в DOM, а затем отфильтруем.

Обратите внимание, как был произведён выбор: в каждой секции (от 1 до 5) у элементов есть общий родительский элемент. Пример: родительский элемент для первой секции — body , для второй секции — контейнер с классом main , и т. д. Каждая секция соответствует уровню вложенности кода.

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

Теперь мы завершаем часть работы, связанную с выбираемым элементом, и приступаем к фильтрации.

Only-of-type проходит через все секции, выбирая только те элементы , которые являются единственными для своей секции.

Псевдокласс first-of-type (первый из выбранного типа)

Давайте продолжим с того, на чём остановились — с выбираемого элемента (речь идёт об -теге).

Селектор first-of-type выбирает каждый первый элемент в секции.

Код, который выполняет условия приведённой выше схемы:

Вы можете посмотреть как работает этот код в браузе на codepen.io.

Псевдокласс last-of-type (последний из выбранного типа)

Last-of-type — полная противоположность псевдокласса first-of-type . Этот селектор выбирает последние элементы во всех секциях.

Псевдокласс nth-of-type (n-й из выбранного типа)

Теперь переходим к наиболее интересной части статьи. Рассмотрим простой CSS с элементами математики из школьной программы.

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

Вместо nth подставьте число из скобок в порядковой форме, чтобы прочитать правильно селектор.

Итак, давайте вернёмся к селектору. a:nth-of-type(1) может читаться точно так же, как и a:first-of-type . В данном случае эти селекторы работают одинаково: каждый из них выбирает только те элементы , которые являются первыми в своих секциях.

А теперь давайте попробуем кое-что другое:

А если мы пойдём немного глубже и напишем следующее условие:

то селектор выберет каждый второй элемент в первой и во второй секциях.

Для полного понимания картины приведу ещё один пример:

В этом случае будет выбран третий (не перепутайте с a:last-of-type ) элемент во второй секции, так как эта секция — единственная, в которой есть три элемента .

Достаточно просто, не так ли? Но вставлять в скобки вы можете не только числа, но и формулы. Например, (a*n)+b (то же самое, что и an + b ), где a и b константы, а n значение, которое больше или равно нулю. Не переживайте, если вам что-то непонятно, сейчас я всё объясню.

Для начала применим следующий стиль:

Формула, переданная в селектор выглядит следующим образом: (1 * n) + 0 [=n] , где а = 1 , b = 0 , n — переменная. Теперь давайте разберёмся, что идёт дальше. Значение n последовательно вставляется в формулу, начиная с 0, после этого селектор делает выбор. Поэтому a:nth-of-type можно представить следующим образом:

В соответствии с данными результатами и будет выбран элемент .

Давайте приведём ещё один пример:

При постепенном заполнении значений n с нуля будут генерироваться следующие селекторы:

Помимо чисел и формул, генерирующих числа, вы можете также выбирать чётные или нечётные номера элементов. Even выбирает все чётные номера элемента в соответствующих секциях. Предположим, что у нас есть секция с 4-мя элементами . Из этой секции селектор выберет второй и четвёртый элементы . Аналогичным образом селектор работает с нечётными числами, только следует заменить even на odd a:nth-of-type(odd)

Псевдокласс nth-last-of-type (n-й с конца из выбранного типа)

Этот селектор работает точно так же, как и предыдущий, но с небольшим отличием:

На этом часть статьи о селекторах *-of-type подходит к концу. Надеюсь, что вам понравилось. Мы проделали большой путь от only-of-type до nth-last-of-type , углубившись в first-of-type , last-of-type и nth-of-type . Если где-то в середине вы что-то не до конца поняли, то предлагаю вам поэкспериментировать в codepen и перечитать эту часть.

Настало время перейти к новой категории псевдоклассов — *-child . В этой части статьи мы рассмотрим и попытаемся понять, как работает эта категория селекторов. После того, как вы изучили предыдущие селекторы, эта категория псевдоклассов не покажется вам трудной. Давайте начнём!

Псевдокласс only-child (единственный из выбранного типа дочернего элемента)

Примените следующий стиль к HTML-коду, который дан в самом начале .

Псевдокласс first-child (первый дочерний элемент)

Примените следующий стиль:

Псевдокласс last-child (последний дочерний элемент)

Думаю, что после всего материала, который мы изучили, вы примерно понимаете, как работает этот селектор. Если нет — объясняю: last-child выбирает последний элемент в каждой секции. Правило прежнее: -элемент должен быть именно первым в списке всех дочерних элементов, иначе он не будет выбран.

Обратите внимание на схему после кода.

Псевдокласс nth-child (n-й дочерний элемент)

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

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

Всё работает так же, как и с селектором nth-of-type .

Чтобы начать использовать nth-child , нужно повторить все те действия, которые мы произвели с селектором nth-of-type — поместить в скобки любое число. В примере выше селектор сработает точно так же, как и first-child — выберет все первые элементы в секциях.

Итак, давайте перейдём к новому примеру:

Постепенно добавляем значения n в формулу начиная с 0, и это даёт нам понять, что селектор сверху во многом схож тем, что ниже.

Если селектор получает числа, выходящие за пределы секторов (как -1, 5, 6), он просто их игнорирует.

На схеме ниже показано действие селектора a:nth-child(2n-1) :

На сайте CSS Tricks вы сможете найти очень полезную и исчерпывающую статью о селекторе :nth-child .

А пока что давайте перейдём к последнему селектору в нашем руководстве.

Псевдокласс nth-last-child (n-й дочерний элемент с конца)

Этот селектор работает точно так же, как и :nth-child , за исключением одной тонкости: он видит и читает дерево DOM в обратном направлении — справа налево.

Дочерние элементы в каждой секции для этого селектора выстраиваются в ряд справа налево.

Обратите внимание на то, как расположены и выбраны дочерние элементы на схеме:

Как видите, всё довольно просто — выбор элемента происходит с конца.

Заключение

На этом наше знакомство с псевдоклассами окончено. Но вы всегда можете найти полезный материал по CSS у нас на сайте. Желаем вам удачи в освоении CSS!

Переменные в CSS

Переменные в CSS

Здравствуйте! Я уже писал о препроцессорах Less и Sass. Так вот у них есть возможность использовать переменные в которых можно сохранять значения CSS свойств. Но теперь эта возможность появилась и в чистом CSS без всяких там препроцессоров. Вот о ней я и хочу рассказать в этой статье.

Хочу заметить, что хотя часто и используется термин «переменные» (css variables), но официально они называются custom properties (кастомные свойства).

Определение переменных CSS надо начинать с префикса —, например, —my-var. Их можно определять для любого элемента. Например:

Здесь в примере CSS для элемента div определены 2 переменныx: —text-col и —text-siz.

С помощью специального выражения var() вы можете ссылаться на эти переменные в любой части кода:

В итоге 1-ый блок получит высоту шрифта из —text-siz, 2-ой блок получит цвет шрифта из —text-col, а третий блок получит оба этих компонента.

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

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

А, что если бы параграф находился бы вне блока div:

Тогда бы значения из переменных к нему бы не применились:

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

Резервные значения переменных

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

2-ой параметр в функции var() позволяет задать резервное значение. Это может быть как точное значение, так и значение другой переменной:

Для второй переменной можно также определить резервное значение, если она будет некорректна:

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Топ-пост этого месяца:  Подписка на Google Play Music в России станет дороже
Добавить комментарий