Recursos de escopo local (herança) de variáveis CSS var

Um, as variáveis CSS não são globais

Recentemente, trabalhei em um projeto e descobri que um recurso interessante das variáveis CSS é que o escopo das variáveis não é global.

Por exemplo, o seguinte HTML e CSS:

<div class = "box"> 
    <div class = "a"> 测试 a </div> 
    <div class = "b"> 测试 b </div> 
    <div class = "c"> 测试 c </div> 
</div>

.box { 
    --color: vermelho; 
    cor: var (- cor); 
} 
.a { 
    --color: green; 
    cor: var (- cor); 
} 
.b { 
    --color: blue; 
    cor: var (- cor); 
} 
.c { 
    --color: amarelo; 
}

Embora todo o CSS compartilhe um documento de contexto, há um conceito de escopo para as variáveis CSS. As variáveis só podem agir sobre si mesmas e os elementos descendentes, irmãos e ancestrais não podem ser apreciados.

Portanto, as cores finais aqui são: verde, azul e vermelho. A seguinte captura de tela:

Captura de tela da variável e da cor do texto

Ver para crer, você pode clicar aqui com força: O escopo local da demonstração de variáveis CSS

Portanto, se suas variáveis são usadas globalmente, é recomendável colocá-las :root, por exemplo:

: root { 
    --color: red; 
}

Claro, você também pode usar tags body ou html:

corpo { 
    --color: vermelho; 
}

Se suas variáveis são usadas localmente, apenas defina-as no elemento da caixa do módulo.

.module { 
    --color: red; 
}

Na verdade, deixe de lado a palavra variável. Podemos entendê-lo como uma propriedade CSS personalizada com características herdadas.

Em segundo lugar, o uso de características locais variáveis CSS

Por causa do efeito local das variáveis CSS, podemos usar variáveis CSS com segurança para passar parâmetros para pseudoelementos.

Por exemplo, uma página de upload de várias imagens tem muitas barras de progresso de carregamento. Neste momento, as variáveis CSS podem ser usadas para passar o progresso de carregamento para o pseudoelemento. Dessa forma, um rótulo pode atingir um efeito de progresso completo. O código é conciso e eficiente. No passado, tínhamos que aninhar tags HTML para conseguir isso. O código HTML é o seguinte:

<label> 图片 1 ： </label> 
<div class = "bar" style = "- percent: 60;"> </div> 
<label> 图片 2 ： </label> 
<div class = "bar" style = "- percent: 40;"> </div> 
<label> 图片 3 ： </label> 
<div class = "bar" style = "- percent: 20;"> </div>

Precisamos apenas atualizar a variável de progresso do upload atual no atributo de estilo.

Em seguida, podemos converter essa variável no valor e largura do pseudo elemento de que precisamos. O código CSS é o seguinte:

.bar { 
    altura: 20px; largura: 300px; 
    cor de fundo: # f5f5f5; 
} 
.bar :: before { 
    counter-reset: progress var (- percent); 
    conteúdo: contador (progresso) '% \ 2002'; 
    display: bloco; 
    largura: calc (300px * var (- por cento) / 100); 
    tamanho da fonte: 12px; 
    cor: #fff; 
    cor de fundo: # 2486ff; 
    alinhamento de texto: direita; 
    espaço em branco: nowrap; 
    estouro: oculto; 
}

O valor da borda CSS pode lembrar a counterapresentação do contador. Para aqueles que não sabem sobre o contador, consulte o artigo " Explicação detalhada do contador CSS (incremento automático do número do catálogo do conteúdo) ", que também é apresentado em detalhes no livro "CSS World" .

A largura pode ser calc()convertida em um pxvalor de banda com a ajuda de. Alguns outros detalhes de implementação não serão expandidos. Se você tiver alguma dúvida, pode comentar e eu responderei. O efeito final é mostrado na figura abaixo:

Efeito da barra de progresso do upload realizado por rótulo único e variável

Há uma demonstração, você pode clicar aqui: variáveis CSS e demonstração da barra de progresso do upload

Percebe-se que o CSS está se tornando cada vez mais dinâmico.

Três, conclusão

Variáveis CSS são como variáveis JS. Cada nome de classe ou chave é como um function. As variáveis dentro só podem ser acessadas dentro do contexto, o que dá mais possibilidades ao CSS. Com um pouco de variáveis externas, todo o CSS pode ser bastante vinculado, e é em tempo real, o que é muito interessante, e há muitas coisas para brincar. Mas não vou começar aqui por enquanto, porque estou com sono e vai haver transmissão ao vivo amanhã de manhã.

Anexe dois artigos de dicas sobre variáveis CSS3 que escrevi antes:

É isso, obrigado pela leitura!