geração de sombra colorida com variáveis ​​CSS: um método sistemático

question

podemos imitar a funcionalidade da função escurece de Sass () usando variáveis ​​CSS para Gere tons de uma abordagem de cor definida? --cor-primário: #f00; --cor-primário-Darker: hsl (de var (-color-primary) h s calc (l-5)); --cor-primário-escuro: hsl (de var (-color-primary) h s calc (l-10)); }

Aqui está como funciona:

-color-primary: define o color base. 5% usando hsl ().

:root {
  --color-primary: #f00;
  --color-primary-darker: hsl(from var(--color-primary) h s calc(l - 5));
  --color-primary-darkest: hsl(from var(--color-primary) h s calc(l - 10));
}

-color-primary-Darkest: escurece a cor base em 10% usando hsl (). Use estas variáveis ​​para estilizar elementos:

. Button { Antecedentes: var (-cor-primário); } .Button: Hover, .Button: Focus { Antecedentes: var (-color-primário-escreador); } .Button: ativo { Antecedentes: var (-cores-primo-escuro); }

• Essa abordagem permite definir tons de cores dinamicamente sem modificar a variável de cor, alcançando o efeito de gradiente desejado com três tons.