[Перевод] Все, что вам нужно знать о переменных CSS

Оригинальный адрес:Everything you need to know about CSS Variables

Оригинальный автор:Ohans Emmanuel

Перевод с:Программа перевода самородков

Постоянная ссылка на эту статью:GitHub.com/rare earth/gold-no…

Переводчик:MechanicianW

Корректор:xueshuai dazhi1011

Эта статьямоя новая электронная книгаПервая глава (электронная книга в настоящее время доступна для скачивания в форматах pdf и mobi).

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

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

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

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

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

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

ты выучишь

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

Изучение основ — это действительно круто. Еще круче использовать основы для создания настоящего приложения.

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

Проект 1: создание компонента вариации с переменными CSS

Возможно, вы уже создали компонент с изменяющимся эффектом. Используете ли вы React, Angular или Vue, использование переменных CSS упростит процесс сборки.

Используйте переменные CSS для создания изменяющегося компонента.

допустимыйCodepenПосмотрите этот проект на .

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

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

Настройте темы для всего сайта с помощью переменных CSS.

допустимыйCodepenПосмотрите этот проект на .

Проект 3: Создание стенда с переменными CSS

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

Цвет коробки динамически обновляется.

Обратите внимание, как динамически обновляется цвет поля и как контейнер поля вращается в 3D при изменении значения входного диапазона.

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

Это будет очень весело!

провести некоторое время вCodepenПоиграй на нем.

Примечание. В этой статье предполагается, что вы знакомы с CSS. Если вы плохо разбираетесь в CSS или хотите научиться создавать потрясающие эффекты пользовательского интерфейса, я рекомендую вам изучить мойПродвинутый курс CSS(Всего 85 часов платных курсов). Эта статья является выдержкой из содержания курса. 😉

Почему переменные так важны

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

Причина №1: сделать код более читабельным

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

Причина № 2: простота модификации больших документов

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

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

Причина № 3: позиционный набор текста быстрее

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

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

Благодаря переменным CSS мы теперь можем пользоваться всеми этими преимуществами в родном CSS.

Определить переменные CSS

Начните с того, с чем вы уже знакомы: с переменных в JavaScript.

В JavaScript простое объявление переменной будет выглядеть так:

var amAwesome;

Затем вы можете назначить ему следующее:

amAwesome = "awesome string"

В CSS «свойства», начинающиеся с двух дефисов, являются переменными CSS.

/*你可以找到变量吗？ */
.block {
 color: #8cacea;
--color: blue
}

Переменные CSS также известны как «настраиваемые свойства».

Область действия переменной CSS

Следует отметить еще одну вещь.

Помните, что переменные в JavaScript имеют область видимости:全局作用域, либо局部作用域.

То же самое касается переменных CSS.

Рассмотрим следующий пример:

:root {
  --main-color: red
}

:rootСелекторы позволяют нацеливаться на самый верхний элемент или дерево документа в DOM.

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

Вы понимаете?

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

Пример 1

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

Что бы ты сделал?

Создайте селектор области. пройти через:rootСоздайте глобальную переменную.

:root {

}

определить переменную

:root {
 --primary-color: red
}

Помните, что в CSS «свойства», начинающиеся с двух дефисов, являются переменными CSS, например--color

Это так просто.

Используйте переменные CSS

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

Но есть небольшая проблема.

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

$font-size: 20px

.test {
  font-size: $font-size
}

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

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

:root {
  --font-size: 20px
}

.test {
  font-size: var(--font-size)
}

Два написания совершенно разные.

Не забудьте использовать функцию var.

Как только вы привыкнете к этому, вы влюбитесь в переменные CSS.

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

/*这是错的*/
.margin {
--side: margin-top;
var(--side): 20px;
}

Это объявление вызывает синтаксическую ошибку из-за недопустимого имени свойства.

Переменные CSS также не могут выполнять математические операции. При необходимости это можно сделать через CSScalc()функция для расчета. Далее проиллюстрируем на примерах.

/*这是错的*/
.margin {
--space: 20px * 2;
font-size:  var(--space);  // 并非 40px
}

Если вам нужно заняться математикой, используйте функцию calc() следующим образом:

.margin {
--space: calc(20px * 2);
font-size:  var(--space);  /*等于 40px*/
}

Кое-что о свойствах

Вот несколько вариантов поведения атрибутов, которые необходимо объяснить:

1. Пользовательские атрибуты — это обычные атрибуты, которые можно объявить на любом элементе.

Объявление пользовательских атрибутов для p, section, aside, корневых элементов и даже псевдоэлементов работает хорошо.

Эти настраиваемые свойства работают так же, как и обычные свойства.

2. Переменные CSS разрешаются обычными правилами наследования и каскадирования.

Рассмотрим следующий код:

div {
  --color: red;
}

div.test {
  color: var(--color)
}

div.ew {
  color: var(--color)
}

Как обычные переменные,--colorЗначение будет унаследовано элементами div.

3. Доступ к переменным CSS можно получить через`@media`и другие условные правила становятся условными переменными

Как и в случае с другими свойствами, вы можете передать@mediaБлоки кода или другие условные правила изменяют значение переменной CSS.

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

:root {
 --gutter: 10px
}

@media screen and (min-width: 768px) {
    --gutter: 30px
}

Полезно для адаптивного дизайна.

4. Переменные CSS можно использовать в атрибуте стиля HTML.

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

<!--HTML-->
<html style="--color: red">

<!--CSS-->
body {
  color: var(--color)
}

Установите встроенное значение переменной.

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

/*这是两个不同的变量*/
:root {
 --color: blue;
--COLOR: red;
}

Разбирать несколько объявлений

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

Например:

/*定义变量*/
:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }

/*使用变量*/
* { color: var(--color); }

Согласно приведенному выше объявлению переменной, какого цвета будет следующий элемент?

<p>What's my color?</p>
<div>and me?</div>
<div id='alert'>
  What's my color too?
  <p>color?</p>
</div>

Вы придумали ответ?

Цвет первого элемента p蓝色.pВ селекторе нет прямого определения цвета, поэтому он начинается с:rootНаследовать значение свойства на

:root { --color: blue; }

ПервыйdivЦвет элемента绿色. Это очень просто, потому что есть переменные, определенные непосредственно вdivэлемент

div { --color: green; }

имеет идентификаторalertизdivцвет элементанетзеленый, но红色

#alert { --color: red; }

Поскольку область действия переменных напрямую связана с этим идентификатором, значение, определенное переменной, переопределит другие значения.#alertСелектор — это более конкретный селектор.

наконец,#alertвнутри элементаpЦвет элемента红色

В этом элементе p нет объявления переменной. из-за:rootЗаявленное свойство цвета蓝色, вы можете подумать, что цвет этого элемента p также蓝色.

:root { --color: blue; }

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

#alert { --color: red; }

Ответы на викторины.

разрешить циклические зависимости

Циклические зависимости могут возникать в следующих сценариях:

Когда переменная зависит сама от себя, то есть переменная проходитvar()Когда функция указывает на себя.

:root {
  --m: var(--m)
}

body {
  margin: var(--m)
}

Две или более переменных ссылаются друг на друга.

:root {
  --one: calc(var(--two) + 10px);
  --two: calc(var(--one) - 10px);
}

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

Что происходит, когда используется недопустимая переменная?

Механизм синтаксических ошибок устарел, незаконенvar()По умолчанию будет заменено начальным или унаследованным значением свойства.

Рассмотрим следующий пример:

:root { --color: 20px; }
p { background-color: red; }
p { background-color: var(--color); }

Как мы и ожидали,--colorпеременная будет вvar()заменяется в , но после замены значение свойстваbackground-color: 20pxявляется незаконным. из-заbackground-colorне является наследуемым свойством, значение свойства будет заменено его начальным значением по умолчанию, т.е.transparent.

Обратите внимание, что если вы не передаете подстановку переменных, а напрямую пишетеbackground-color: 20pxЕсли объявление фонового атрибута недопустимо, используется предыдущее определение объявления.

Иначе обстоит дело, когда вы пишете заявление самостоятельно.

Будьте осторожны при использовании отдельных символов

Когда вы устанавливаете значение свойства следующим образом,20pxОн будет проанализирован как один символ.

font-size: 20px

Есть простой способ понять,20pxЭто значение можно рассматривать как единую «сущность».

Будьте очень осторожны при создании отдельных символов с переменными CSS.

В качестве примера рассмотрим следующий код:

:root {
 --size: 20
}

div {
  font-size: var(--size)px /*这是错的*/
}

ты можешь подуматьfont-sizeЗначение20px,Тогда ты не прав.

Браузер интерпретирует результат как20 px

осторожность20пробел после

Поэтому, если вам необходимо создать отдельный символ, используйте переменную для представления всего символа. Например--size: 20pxили используйтеcalcтакие функции, какcalc(var(--size) * 1px)середина--sizeравно20

Не волнуйтесь, если вы этого не понимаете, я объясню это более подробно в следующем примере.

Весельная лодка!

Вот мы и добрались до долгожданной главы.

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

Давайте начнем.

Проект 1: создание компонента вариации с переменными CSS

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

В этом случае кнопкаbackground-colorа такжеborder-colorсвойства разные.

Так что бы вы сделали?

Вот типичное решение.

создать.btnБазовый класс, а затем добавьте класс для изменения. Например:

<button class="btn">Hello</button>
<button class="btn red">Hello</button>

.btnВключает в себя основные стили для кнопок, такие как:

.btn {
  padding: 2rem 4rem;
  border: 2px solid black;
  background: transparent;
  font-size: 0.6em;
  border-radius: 2px;
}

/*hover 状态下*/
.btn:hover {
  cursor: pointer;
  background: black;
  color: white;
}

Где ввести вариацию?

здесь:

/* 变化 */

.btn.red {
  border-color: red
}
.btn.red:hover {
  background: red
}

Вы видели, что мы скопировали код в нескольких местах? Это неплохо, но мы можем добиться большего успеха с переменными CSS.

Каков первый шаг?

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

.btn {
   padding: 2rem 4rem;
   border: 2px solid var(--color, black);
   background: transparent;
   font-size: 0.6em;
   border-radius: 2px;
 }

 /*hover 状态下*/
 .btn:hover {
  cursor: pointer;
   background: var(--color, black);
   color: white;
 }

когда ты пишешьbackground: **var(--color, black)**Когда значение цвета фона установлено в переменную--colorЗначение переменной, если переменная не существует, используйте значение по умолчанию**black**

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

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

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

.btn.red {
   --color: red
 }

Это так просто. теперь при использовании.redкласс, браузер замечает другой--colorзначение переменной, стиль кнопки будет немедленно обновлен.

Использование переменных CSS — отличный вариант, если вы тратите много времени на создание повторно используемых компонентов.

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

Не используйте переменные CSS VS используйте переменные CSS.

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

Увидеть разницу? ?

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

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

Вот простой пример, который я написал:

Насколько легко это сделать с помощью переменных CSS?

Давайте взглянем.

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

очень понравилось!

ты полюбишь это!

Что именно мы хотим сделать.

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

Концептуально следующая диаграмма объясняет поток этого примера.

обработать.

Поэтому нам нужно написать некоторый код JavaScript для прослушивателя событий щелчка.

В этом простом примере цвета текста и страницы, а также цвета фона основаны на переменных CSS.

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

Это все.

есть еще одна вещь.

Как мне это сделать, когда я говорю, что переменные CSS переключаются на другие цвета?

Установите переменные в строку.

Переменные CSS действуют, даже если они встроены. В JavaScript мы управляем корневым узлом документа и можем устанавливать новые значения in-line для переменных CSS.

Вы понимаете?

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

инициализация структуры

Структура инициализации такая:

<div class="theme">
  <button value="dark">dark</button>
  <button value="calm">calm</button>
  <button value="light">light</button>
</div>

<article>
...
</article>

Структура имеет три родительских элемента, как.themeэлемент кнопки. Чтобы быть максимально кратким, яarticleСодержимое внутри элемента усекается.articleВнутри элемента находится содержимое страницы.

установить стиль страницы

Успех проекта начинается со стиля страницы. Этот трюк очень прост.

Мы оформляем страницуbackground-colorа такжеcolorОн основан на переменных, а не на жестко заданных значениях свойств.

Вот что я сказал:

body {
  background-color: var(--bg, white);
  color: var(--bg-text, black)
}

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

В соответствии с изменением значения переменной общий стиль страницы соответственно обновляется. Кусок пирога.

Давайте продолжим и решим проблему обновления значений свойств в JavaScript.

Введите JavaScript

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

const root = document.documentElement
const themeBtns = document.querySelectorAll('.theme > button')

themeBtns.forEach((btn) => {
  btn.addEventListener('click', handleThemeUpdate)
})

function handleThemeUpdate(e) {
  switch(e.target.value) {
    case 'dark':
      root.style.setProperty('--bg', 'black')
      root.style.setProperty('--bg-text', 'white')
      break
    case 'calm':
       root.style.setProperty('--bg', '#B3E5FC')
       root.style.setProperty('--bg-text', '#37474F')
      break
    case 'light':
      root.style.setProperty('--bg', 'white')
      root.style.setProperty('--bg-text', 'black')
      break
  }
}

Не пугайтесь этого кода, он проще, чем вы думаете.

Сначала сохраните ссылку на корневой узел,const root = document.documentElement

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

Точно так же сохраните ссылку на кнопку,const themeBtns = document.querySelectorAll('.theme > button')

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

Вот как это сделать:

themeBtns.forEach((btn) => {
  btn.addEventListener('click', handleThemeUpdate)
})

handleThemeUpdateКуда пропала функция? Мы обсудим эту функцию далее.

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

Учитывая это, мы используем переключатель操作符, который выполняет различные действия в зависимости от значения нажатой кнопки.

Посмотрите на этот код JavaScript в следующий раз, и вы поймете его лучше.

Проект 3: Создание стенда с переменными CSS

Если вы пропустили это, вот проект, который мы собираемся построить:

Помните, что цвет поля динамически обновляется, и что контейнер поля вращается в 3D при изменении значения входного диапазона.

вы можете напрямуюCodepenПоиграйте с этим проектом.

Это отличный пример использования JavaScript для обновления переменных CSS и связанного с этим адаптивного характера.

Давайте посмотрим, как его построить.

структура

Ниже приведены необходимые компоненты.

поле ввода диапазона
Контейнер для инструкции по применению
Раздел, содержащий список полей, каждое из которых содержит поля ввода.

Структура становится очень простой.

Ниже приведены:

<main class="booth">
  <aside class="slider">
    <label>Move this 👇 </label>
    <input class="booth-slider" type="range" min="-50" max="50" value="-50" step="5"/>
  </aside>

  <section class="color-boxes">
    <div class="color-box" id="1"><input value="red"/></div>
    <div class="color-box" id="2"><input/></div>
    <div class="color-box" id="3"><input/></div>
    <div class="color-box" id="4"><input/></div>
    <div class="color-box" id="5"><input/></div>
    <div class="color-box" id="6"><input/></div>
  </section>

  <footer class="instructions">
    👉🏻 Move the slider<br/>
    👉🏻 Write any color in the red boxes
  </footer>
</main>

Вот несколько замечаний.

Ввод диапазона представляет из-50прибыть50значение диапазона, значение шага5. Таким образом, минимальное значение входного диапазона равно-50
Если вы не уверены, будет ли работать ввод диапазона, вы можетеw3schoolsПроверьте следующее
Обратите внимание на имя класса.color-boxesкак раздел содержит другие.color-boxконтейнер. Эти контейнеры содержат поля ввода.
Первое поле ввода имеет значение по умолчанию красного цвета.

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

Пучок.sliderа также.instructionsУстановите вне потока документов, установите их положение в абсолютное
БудуbodyЦвет фона элемента установлен в цвет восхода солнца и украшен цветами в левом нижнем углу.
Будуcolor-boxesКонтейнер расположен посередине
Датьcolor-boxesКонтейнеры добавляют стили

Давайте решим эти задачи.

Следующий код завершит первый шаг.

/* Slider */
.slider,
.instructions {
  position: absolute;
  background: rgba(0,0,0,0.4);
  padding: 1rem 2rem;
  border-radius: 5px
}
.slider {
  right: 10px;
  top: 10px;
}
.slider > * {
  display: block;
}


/* Instructions */
.instructions {
  text-align: center;
  bottom: 0;
  background: initial;
  color: black;
}

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

ДатьbodyДобавление стилей немного сложнее, надеюсь, вы достаточно знаете о CSS.

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

Вот и все:

body {
  margin: 0;
  color: rgba(255,255,255,0.9);
  background: url('http://bit.ly/2FiPrRA') 0 100%/340px no-repeat, var(--primary-color);
  font-family: 'Shadows Into Light Two', cursive;
}

urlэто ссылка на изображение подсолнуха.

установить следующий0 100%Представляет положение изображения на заднем плане.

На этом рисунке показано, как работает свойство CSS background position:

От:Расширенное руководство по CSS

От:Расширенное руководство по CSS

Делегат после косой чертыbackground-sizeустановить как340px, если вы установите его меньше, изображение также будет меньше.

no-repeat, вы могли догадаться, что он делает. Это позволяет избежать самовоспроизведения фонового изображения, закрывая фон.

Наконец, после запятой идет объявление второго свойства фона. На этот раз мы простоbackground-colorУстановить какvar(primary-color)

Вау, это переменная.

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

:root {
  --primary-color: rgba(241,196,15 ,1)
}

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

Теперь мы будемcolor-boxesрасположен посередине

main.booth {
  min-height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
}

Основной контейнер действует как гибкий контейнер, а его дочерние элементы правильно расположены в середине страницы. То есть нашcolor-boxКонтейнер будет расположен в середине страницы.

Мы сделали цветные поля и контейнеры их дочерних элементов немного лучше.

Во-первых, дочерние элементы:

.color-box {
  padding: 1rem 3.5rem;
  margin-bottom: 0.5rem;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 0.3rem;
  box-shadow: 10px 10px 30px rgba(0,0,0,0.4);
}

Это добавляет приятную тень и делает эффект еще круче.

Это еще не конец, мы отдаем всеcontainer-boxesКонтейнер плюс стили:

/* Color Boxes */
.color-boxes {
  background: var(--secondary-color);
  box-shadow: 10px 10px 30px rgba(0,0,0,0.4);
  border-radius: 0.3rem;

  transform: perspective(500px) rotateY( calc(var(--slider) * 1deg));
  transition: transform 0.3s
}

Ух ты!

получилось слишком сложно.

Удалите некоторые.

Сделать это легче:

.color-boxes {
   background: var(--secondary-color);
   box-shadow: 10px 10px 30px rgba(0,0,0,0.4);
   border-radius: 0.3rem;
}

Вы же знаете, какой будет эффект?

Вот новая переменная, которую нужно объявить в корневом элементе.

:root {
  --primary-color: rgba(241,196,15 ,1);
  --secondary-color: red;
}

Второй цвет — красный, и мы добавим контейнеру красный фон.

Следующая часть может вас смутить:

/* Color Boxes */
.color-boxes {
  transform: perspective(500px) rotateY( calc(var(--slider) * 1deg));
  transition: transform 0.3s
}

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

Например:

transform: perspective(500px) rotateY( 30deg);

Это сокращение преобразования использует две разные функции. Один — это угол обзора, а другой — поворот по оси Y.

Такperspectiveфункция иrotateYЧто делает функция?

Функцияspective() применяется к элементам, повернутым в 3D-пространстве. Он активирует трехмерное пространство и дает глубину элемента по оси Z.

допустимыйcodropsУзнайте больше о перспективе на .

rotateYЧто делает функция?

После активации 3D-пространства элементы имеют оси x, y, z.rotateYэто элемент, окружающийYплоскостное вращение.

последующийcodropsДиаграммы полезны для визуального понимания.

Codrops

Я надеюсь, что это сделало это немного более ясным для вас.

Вернемся к предыдущей теме.

Когда вы вернетесь сюда, вы будете знать, какая функция влияет на.container-boxОн вращается?

это функция rotateY, которая вращает прямоугольник вокруг Y кругов.

Поскольку значение, переданное в функцию rotateY, будет обновлено JavaScript, это значение также будет передано через переменную.

Зачем умножать переменные на 1 градус?

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

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

Это означает, что вы можете делать все, что захотите. будет пропорциональноdegПреобразование в единицы области просмотраvwТакже может.

В этой сцене мы конвертируем число в угол, умножая «число» на 1 градус.

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

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

Теперь осталось написать совсем немного CSS-кода.

Это оно:

/* 给每个盒子添加颜色 */
.color-box:nth-child(1) {
  background: var(--bg-1)
}
.color-box:nth-child(2) {
  background: var(--bg-2)
}
.color-box:nth-child(3) {
  background: var(--bg-3)
}
.color-box:nth-child(4) {
  background: var(--bg-4)
}
.color-box:nth-child(5) {
  background: var(--bg-5)
}
.color-box:nth-child(6) {
  background: var(--bg-6)
}

Что это за странные вещи?

Во-первых, для выбора дочерних блоков используется селектор nth-child.

Здесь требуется некоторая предусмотрительность. Как мы знаем, цвет фона каждой коробки обновляется. Мы также знаем, что цвет фона должен быть представлен изменяемой переменной в JavaScript. Верно?

.color-box:nth-child(1) {
  background: var(--bg-1)
}

Будь проще.

Здесь есть проблема. Что делать, если переменная не существует?

У нас есть запасной вариант.

Это работает:

.color-box:nth-child(1) {
  background: var(--bg-1, red)
}

В данном конкретном случае я выбираюНе предоставленлюбой откат.

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

Следовательно, когда--bg-1Если параметр недействителен или недоступен, цвет фона по умолчанию будет первоначальным или прозрачным.

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

Начальное значение является значением свойства по умолчанию.

Напишите немного JavaScript

Очень мало нужно сделать на стороне JavaScript.

Первое, что нужно сделать, это разобраться с ползунком.

Всего пять строк кода!

const root = document.documentElement
const range = document.querySelector('.booth-slider')

// 一旦 slider 的范围值发生变化，就执行回调
range.addEventListener('input', handleSlider)

function handleSlider (e) {
  let value = e.target.value
  root.style.setProperty('--slider', value)
}

Это просто, верно?

Позволь мне объяснить.

Сначала сохраните ссылку на элемент слайдера,const range = document.querySelector('.booth-slider')

Настройте прослушиватель событий, который срабатывает всякий раз, когда изменяется входное значение диапазона,range.addEventListener('input', handleSlider)

Напишите функцию обратного вызова,handleSlider

function handleSlider (e) {
  let value = e.target.value
  root.style.setProperty('--slider', value)
}

root.style.setProperty('--slider', value)значит получитьrootэлемент (HTML), прочитать его стили и установить для него свойства.

Обработка изменений цвета

Это так же просто, как обработка изменений значения ползунка.

Сделайте это, чтобы:

const inputs = document.querySelectorAll('.color-box > input')

// 一旦输入值发生变化，执行回调
inputs.forEach(input => {
  input.addEventListener('input', handleInputChange)
})

function handleInputChange (e) {
  let value = e.target.value
  let inputId = e.target.parentNode.id
  let inputBg = `--bg-${inputId}`
  root.style.setProperty(inputBg, value)
}

вести цитирование всех текстовых записей,const inputs = document.querySelectorAll('.color-box > input')

Добавьте прослушиватели событий в каждое поле ввода:

inputs.forEach(input => {
   input.addEventListener('input', handleInputChange)
})

НапишитеhandleInputChangeфункция:

function handleInputChange (e) {
  let value = e.target.value
  let inputId = e.target.parentNode.id
  let inputBg = `--bg-${inputId}`
  root.style.setProperty(inputBg, value)
}

Эм……

Это оно!

Проект завершен.

Что мне не хватает?

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

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

caniuse

Итак, можете ли вы использовать переменные CSS в продакшене? конечно может! Но насколько это применимо, судить вам.

С другой стороны, вы можете использовать что-то вродеMythТакой препроцессор для использования переменных CSS. Он предварительно компилирует «будущий» CSS в код, который вы можете использовать уже сейчас, разве это не круто?

если вы использовалиpostCSSопыта, это тоже хороший метод. ЭтоМодуль переменных CSS для postCSS.

Вот и все, я все написал.

Нет, у меня проблема!

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

Это честная сделка, верно?

папа! 💕

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

ты выучишь

Проект 1: создание компонента вариации с переменными CSS

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

Проект 3: Создание стенда с переменными CSS

Это будет очень весело!

Почему переменные так важны

Причина №1: сделать код более читабельным

Причина № 2: простота модификации больших документов

Причина № 3: позиционный набор текста быстрее

Определить переменные CSS

Область действия переменной CSS

Пример 1

Используйте переменные CSS

Кое-что о свойствах

1. Пользовательские атрибуты — это обычные атрибуты, которые можно объявить на любом элементе.

2. Переменные CSS разрешаются обычными правилами наследования и каскадирования.

3. Доступ к переменным CSS можно получить через@mediaи другие условные правила становятся условными переменными

4. Переменные CSS можно использовать в атрибуте стиля HTML.

Разбирать несколько объявлений

разрешить циклические зависимости

Что происходит, когда используется недопустимая переменная?

Будьте осторожны при использовании отдельных символов

Весельная лодка!

Проект 1: создание компонента вариации с переменными CSS

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

Что именно мы хотим сделать.

инициализация структуры

установить стиль страницы

Введите JavaScript

Проект 3: Создание стенда с переменными CSS

структура

Напишите немного JavaScript

Обработка изменений цвета

Что мне не хватает?

Нет, у меня проблема!

3. Доступ к переменным CSS можно получить через`@media`и другие условные правила становятся условными переменными