CSS [Explicación detallada] Propiedades personalizadas (también conocidas como variables CSS)

2024-07-12

Declarar variables - -

Reglas de nomenclatura de variables

Admite nombres numéricos
Admite nombres usando guiones y espacios
Admite textos en chino y otros textos CJK
No se admiten nombres que contengan caracteres especiales como $, [,], ^, (,), %, ", etc.. Para utilizar estos caracteres especiales, debe utilizar el escape de barra invertida.

variable

Puede ser cualquier valor oexpresión

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

Alcance variable

Los elementos descendientes pueden heredar el CSS establecido por los elementos ancestros sin cambios.Propiedades personalizadasvalor.

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

variables globales

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

Características de las variables

Los valores de las variables se pueden pasar entre sí.

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

las variables css no pueden asignarse valores a sí mismas

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

Las variables CSS no se pueden utilizar como valor de la función @media media.

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

Las variables CSS como valores de propiedad del contenido no tienen ningún efecto

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

Utilice la variable var()

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

azul cielo profundo esValor por defecto, use deepskyblue cuando –cualquier cosa no sea válida

Cuando el parámetro de la función var() es ilegal

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

El color de fondo final del cuerpo es transparente, porque el valor inicial del color de fondo es transparente.

Siempre que el primer valor del parámetro de la función var () sea válido, incluso si el valor del parámetro es un desastre, se analizará normalmente. Si el valor del primer parámetro es ilegal, la función var() se resuelve en el valor inicial o el valor heredado de la propiedad CSS actual (si hay herencia), es decir, se representa de acuerdo con las reglas de la palabra clave global no establecida. (Tenga en cuenta que las reglas de representación son similares y no equivalen a configurar directamente la palabra clave unset).

Característica de espacios finales de la función var()

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

El tamaño de fuente final del cuerpo es 14px.

Principio: aquí font-size:var(–size)px es equivalente a font-size:20 px. Tenga en cuenta que hay un espacio después de 20, que es un valor de atributo de tamaño de fuente ilegal. Dado que var(-size)px es gramaticalmente legal, se restablecerá font-size:16px y eventualmente se utilizará el tamaño de fuente de 14px establecido por el elemento principal.

El plan de mejora es:

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 obtiene el valor de la variable global 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 modifica el valor de las variables globales de CSS

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

js establece el valor de las variables locales de CSS

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

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

Ejemplos prácticos

Muestre el valor de la variable CSS en la página con la ayuda del contador CSS

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

barra de progreso

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

imágenes svg utilizadas en varios lugares

: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

ver el efecto https://demo.cssworld.cn/new/8/1-3.php

Efectos de clic en el botón

ver el efecto 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

Principio de implementación

Hay un espacio delante de –open:;, es decir, el valor del atributo –open es un espacio, que puede ser sintácticamente válido.Pero los espacios no son válidos para propiedades CSS como box-shadow y background. Por lo tanto, las propiedades CSS como box-shadow y background se resuelven en valores iniciales.
Después de hacer clic en el botón para activar la pseudoclase activa, se ejecutará la instrucción CSS –open:inherit. La palabra clave CSS global debe ser inválida como valor de atributo personalizado de CSS, por lo que la función var() utilizará el atributo CSS de respaldo. valor de renderizado.

Palabra clave de función CSS personalizada ()

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

Simular la función attr()

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

Compartir tecnología