CSS имеет артефакт переменных CSS, мне больше не нужно меньше и дерзко

внешний интерфейс CSS

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

объявление переменной

При объявлении переменной добавьте два дефиса (--) перед именем переменной.

// 局部声明
body {
  --foo: #ed145b;
  --bar: #F7EFD2;
}

// 全局声明
:root{
  --foo: #ed145b;
  --bar: #F7EFD2;

}

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

Вы можете спросить, почему вы выбрали две строки через дефис (--) для представления переменных? Потому что $foo используется Sass, а @foo — Less. Чтобы избежать конфликтов, официальные переменные CSS вместо этого используют две строки через дефис.

Соглашения об именах

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

:root {
  --1: #369;
}
body {
  background-color: var(--1);
}

Он не может содержать такие символы, как $, [ ^, (,% и т. д.) Обычные символы ограничены «цифрами [0-9]», «буквами [a-zA-Z]», «подчеркиванием_» и «дефисом». -" Комбинация, но может быть китайская, японская или корейская, например:

body {
  --深蓝: #369;
  background-color: var(--深蓝);
}

функция вар()

После объявления переменной мы, естественно, хотим ее получить и использовать, тогда для чтения переменной используется функция var()

p {
  color: var(--foo);
  border::1px solid var(--bar);
}

var() второй параметр

color: var(--foo, #ED145B); //第二个参数就是默认值，假设--foo为空情况下，会使用#ED145B

Функцию var() также можно использовать в объявлениях переменных.

:root {
  --primary-color: red;
  --logo-text: var(--primary-color); // 上面刚声明，这里就可以使用
}

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

.foo {
  --side: margin-top;
  /* 很显然，下面是无效的 */
  var(--side): 20px;
}

тип значения переменной

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

--bar: 'hello';
--foo: var(--bar)' world';

// 示例
body:after {
  content: '--screen-category : 'var(--screen-category);
}

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

foo {
  --gap: 20;
  /* 下面无效 */
  margin-top: var(--gap)px;
 /* 通过calc去计算，下面有效 */
  margin-top: calc(var(--gap) * 1px);
}

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

/* 无效 */
.foo {
  --foo: '20px';
  font-size: var(--foo);
}

/* 有效 */
.foo {
  --foo: 20px;
  font-size: var(--foo);
}

объем

Одна и та же переменная CSS может быть объявлена ​​внутри нескольких селекторов. При чтении вступает в силу объявление с наивысшим приоритетом. Это соответствует правилам «каскада» CSS.

<style>
  :root { --color: blue; }
  div { --color: green; }
  #alert { --color: red; }
  * { color: var(--color); }
</style>

<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>

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

Совместимость

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

a {
  color: #7F583F;
  color: var(--primary); // 应该很好理解，如果这里读不出值，那么并不会覆盖上面的color
}

также можно использовать@supportкоманда для обнаружения

a {
@supports ( (--a: 0)) {
  /* supported */
}

@supports ( not (--a: 0)) {
  /* not supported */
}

Операция JavaScript (суть)

JavaScript также может определить, поддерживает ли браузер переменные CSS.

const isSupported =
  window.CSS &&
  window.CSS.supports &&
  window.CSS.supports('--a', 0);

if (isSupported) {
  /* supported */
} else {
  /* not supported */
}

Манипуляции JavaScript с переменными CSS записываются следующим образом

// 设置变量
document.body.style.setProperty('--primary', '#7F583F'); //局部
document.documentElement.style.setProperty('--primary', '#7F583F'); //全局

// 读取变量
document.body.style.getPropertyValue('--primary').trim(); /局部
document.documentElement.style.getPropertyValue('--primary').trim(); /全局
getComputedStyle(document.documentElement).getPropertyValue('--time'); // 全局，如果是在css表中设置的需要这种方式获取
// '#7F583F'

// 删除变量
document.body.style.removeProperty('--primary'); //局部
document.documentElement.style.removeProperty('--primary'); //全局

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

const docStyle = document.documentElement.style;

document.addEventListener('mousemove', (e) => {
  docStyle.setProperty('--mouse-x', e.clientX);
  docStyle.setProperty('--mouse-y', e.clientY);
});

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

const docStyle = document.documentElement.style;

document.addEventListener('mousemove', (e) => {
  docStyle.setProperty('--mouse-x', e.clientX);
  docStyle.setProperty('--mouse-y', e.clientY);
});

Информация, которая не является полезной для CSS, также может быть помещена в переменные CSS.

--foo: if(x > 5) this.width = 10;

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

резюме

  • Собственные функции браузера, можно запускать напрямую без перевода
  • Член объекта DOM, что значительно облегчает связь между CSS и JS.
  • Это не мешает вам использовать Sass/Less, его можно использовать в комбинации
Категории