CSS [Подробное объяснение] Пользовательские свойства (также известные как переменные CSS)

2024-07-12

Объявить переменные - -

Правила именования переменных

Поддержка числового именования
Поддерживает именование с использованием тире и пробелов.
Поддерживает китайский и другие тексты CJK.
Имена, содержащие специальные символы, такие как $, [,], ^, (,), %, «и т. д., не поддерживаются. Чтобы использовать эти специальные символы, вам необходимо использовать обратную косую черту.

переменная

Может быть любое значение иливыражение

 --direction: to top;
 --gradientColor: deeppink, deepskyblue;
 --gradient: to top, deeppink, deepskyblue;
 --linear-gradient: linear-gradient(to top, deeppink, deepskyblue);
1
2
3
4

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

Элементы-потомки могут наследовать CSS, установленный элементами-предками, без изменений.Пользовательские свойстваценить.

body {
    --color: deepskyblue;
}
.box {
    background-color: var(--color);
}
1
2
3
4
5
6

глобальные переменные

:root {
  --borderColor: #ccc;
}
1
2
3

Характеристики переменных

Значения переменных можно передавать друг другу

body {
    --green: #4CAF50;   
    --successColor: var(--green);
}
1
2
3
4

переменные css не могут присваивать значения самим себе

/* 这种写法是非法的 */
--primary-color: var(--primary-color, #2a80eb);
1
2

переменные css не могут использоваться в качестве значения медиа-функции @media.

:root {
    --maxWidth: 640px;
}
/* 不合法，语法无效 */
@media (max-width: var(--maxWidth)) {}
1
2
3
4
5

Переменные CSS как значения свойств контента не имеют никакого эффекта

/* 无效 */
.bar::before {
    content: var(--percent);
}
1
2
3
4

Используйте переменную var()

p {  
   background-color: var(--any-what, deepskyblue); 
}
1
2
3

DeepskyBlue этоЗначение по умолчанию, используйте deepskyblue, когда –any-what недействителен

Когда параметр функции var() недопустим

body {
    --color: 20px;
    background-color: deeppink;
    background-color: var(--color, deepskyblue);
}
1
2
3
4
5

Конечный цвет фона тела является прозрачным, потому что начальное значение цвета фона прозрачно.

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

Функция конечных пробелов функции var()

html {
    font-size: 14px;
}
body {
    --size: 20;
    font-size: 16px;
    font-size: var(--size)px;
}
1
2
3
4
5
6
7
8

Окончательный размер шрифта основного текста составляет 14 пикселей.

Принцип: здесь font-size:var(–size)px эквивалентен font-size:20 px. Обратите внимание, что после 20 стоит пробел, который является недопустимым значением атрибута font-size. Поскольку var(-size)px грамматически корректен, размер шрифта:16px будет сброшен, и в конечном итоге будет использоваться размер шрифта 14px, установленный родительским элементом.

План улучшения такой:

body {
    --size: 20;   
    font-size: calc(var(--size) * 1px);
}
1
2
3
4

или

body {
    --size: 20px;   
    font-size: var(--size);
}
1
2
3
4

js получает значение глобальной переменной CSS

let borderColor= getComputedStyle(document.documentElement).getPropertyValue("--borderColor");
1

// 获取 --color CSS变量值
var cssVarColor = getComputedStyle(box).getPropertyValue('--color'); 
// 输出cssVarColor值，结果是deepskyblue 
console.log(cssVarColor);
1
2
3
4

js изменяет значение глобальных переменных CSS

document.documentElement.style.setProperty("--borderColor","green");
1

js устанавливает значение локальных переменных CSS

<div id="box">
    <img src="1.jpg" style="border: 10px solid var(--color);">
</div>
1
2
3

box.style.setProperty('--color', 'deepskyblue');
1

Практические примеры

Отображение значения переменной CSS на странице с помощью счетчика CSS.

/* 有效 */
.bar::before {
    counter-reset: progress var(--percent);
    content: counter(progress);
}
1
2
3
4
5

индикатор

https://blog.csdn.net/weixin_41192489/article/details/121007837

svg-изображения, используемые в нескольких местах

:root {
    --icon-check: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32'%3E%3Cpath 
fill='green' d='M28.027 5.161l-17.017 17.017-7.007-7.007-3.003 3.003 10.010 10.010 
20.020-20.020z'%3E%3C/path%3E%3C/svg%3E");
}
.icon-check {
    background: var(--icon-check) no-repeat center / 16px;
    /* 尺寸限制 */
    display: inline-block;
    width: 20px; height: 20px;
}
.valid-pass::after {
    content: var(--icon-check);
    /* 尺寸限制 */
    display: inline-block;
    width: 20px; height: 20px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Посмотрите эффект https://demo.cssworld.cn/new/8/1-3.php

Эффекты нажатия кнопок

Посмотрите эффект https://demo.cssworld.cn/new/8/1-1.php

button {
    /* 这里的空格很重要 */
    --open: ;
    color: #2a80eb;
    -webkit-text-fill-color: #fff;
    border-radius: 4px;
    padding: 9px 20px;
    border: 1px solid var(--open, rgba(0,0,0,.1));
    box-shadow: var(--open, inset 0 1px 2px rgba(0,0,0,.1));
    background: var(--open, linear-gradient(#0003, transparent)) currentColor;
    text-shadow: var(--open, -1px -1px #0003);
    transition: .15s;
}
button:active {
    /* 任意全局关键字都可以 */
    --open: inherit;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Принцип реализации

Перед –open:; имеется пробел, то есть значение атрибута –open представляет собой пробел, который может быть синтаксически допустимым.Но пробелы недопустимы для свойств CSS, таких как box-shadow и background. Поэтому свойства CSS, такие как box-shadow и background, разрешаются в исходные значения.
После нажатия кнопки для запуска псевдокласса :active будет запущен оператор CSS –open:inherit. Глобальное ключевое слово CSS должно быть недопустимым в качестве значения пользовательского атрибута CSS, поэтому функция var() будет использовать резервный атрибут CSS. значение для рендеринга.

Ключевое слово пользовательской функции CSS()

https://blog.csdn.net/weixin_41192489/article/details/121021277

Имитировать функцию attr()

https://blog.csdn.net/weixin_41192489/article/details/121022170

Обмен технологиями