동적 스타일을 생성하여 CSS 코드 가독성 및 유지 관리성을 향상시킵니다.

CSS 변수를 사용하여 점점 더 정교하고 효율적인 웹 애플리케이션을 만드는 방법을 알아보세요.

웹 프로젝트가 성장하고 점점 더 복잡해짐에 따라 수천 줄의 광범위한 CSS 코드를 갖는 것이 매우 일반적이게 되며 이 코드 내에서 속성에 할당된 값의 반복 빈도는 다음과 같을 가능성이 매우 높습니다. 큰 것들도요.

아래 예에서 볼 수 있듯이 color 및 background-color 속성에 동일한 값이 반복됩니다.

.one {
    color: #f0f0f0;
    background-color: #a52a2a;
}

.two {
    color: #f0f0f0;
    background-color: #a52a2a;
}

.three {
    color: #f0f0f0;
    background-color: #a52a2a;
}

.four {
    color: #f0f0f0;
    background-color: #a52a2a;
}

위 예시의 경우 코드 내 수백 곳에서 동일한 색상이 사용될 수 있습니다. 일반 속성의 값은 상대적으로 고정되어 있으므로 나중에 동일한 색상을 가진 모든 요소의 색상을 변경하기로 결정한 경우 코드 전체에서 색상 값을 수동으로 검색하여 다음으로 바꿔야 합니다. 같은 색상. 새로운 색상.

그러나 값을 한 곳에 저장한 다음 다른 여러 곳에서 참조할 수 있는 CSS 변수를 사용하면 웹 개발자로서의 삶의 생산성이 더욱 높아집니다.

CSS 변수는 기본적으로 사용자 정의 속성이지 실제 프로그래밍 변수가 아니라는 점을 분명히 하는 것이 중요합니다. CSS 변수의 값은 필요한 경우 계산되며 요소의 범위로 제한되며 스타일 실행 중에 동적으로 조작하거나 값을 변경할 수 없습니다.

프로그래밍 언어의 변수는 다양한 유형의 값을 포함할 수 있고 프로그램 실행 중에 조작 및 수정될 수 있는 데이터 저장소인 반면, CSS의 변수는 CSS 속성에서 재사용할 특정 값을 저장하는 데 사용됩니다.

이제 아래 예에서는 변수의 고정 값을 교환하고 속성 값 대신 var() 함수를 사용하여 변수 값을 검색합니다. 색상을 변경하기로 결정한 경우 변수 값을 변경하면 변수가 사용되는 모든 인스턴스가 자동으로 업데이트됩니다.

:root {
    --text-primary: #f0f0f0;
    --bg-primary: #a52a2a;
}

.one {
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

.two {
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

.three {
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

.four {
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

정말 멋지죠? CSS 변수가 제공하는 모든 잠재력을 알고 싶다면 이 기사가 끝날 때까지 기다리십시오.

즐거운 독서 되세요!

---

요약

• 변수는 기본적으로 속성입니다
• 가변 범위
• var() 함수
• 속성 및 변수의 잘못된 값

---

변수는 기본적으로 속성입니다.

알겠습니다. 제 의도는 여러분을 혼란스럽게 하려는 것이 아닙니다! 하지만 그렇습니다. CSS 변수와 CSS 속성은 문서에서 스타일을 정의한 것과 동일한 결과를 전달하고 구문과 사용 측면에서 유사하지만 아래에서 볼 수 있듯이 서로 완전히 다른 기능을 가지고 있음을 보여줍니다.

변수 식별자

변수는 이중 하이픈(--)으로 쉽게 식별되며 그 뒤에 대문자와 소문자를 구별하는 변수 이름, 마지막으로 변수에 유효한 값이 옵니다.

--bg-secondary: #00ff00;

위의 예에서 볼 수 있듯이 변수의 추가 이점 중 하나는 변수에 대해 정의하는 이름이 사용자 정의되고 상대적으로 의미론적이라는 것입니다. 즉, --bg-secondary 식별자는 변수로 이해하기가 더 쉽습니다. 16진수 코드 #00ff00.

를 속성 값으로 직접 삽입하는 대신 기본(또는 기본) 배경색과 관련된 보조 배경색

속성은 변수에 비해 이름 앞에 하이픈을 사용할 수 없습니다. 하이픈은 단어를 글꼴 크기, 텍스트 정렬 등과 ​​같은 복합 속성으로 구분하는 데 사용되기 때문입니다. 예외적으로 이름 시작 부분에 단일 하이픈을 사용하는 접두사 -webkit, -moz, -ms 및 -o가 있는 특정 속성이 있습니다. 이러한 속성은 아직 완전히 표준화되거나 통합되지 않은 실험적 기능에 사용됩니다. 공식 CSS 사양 .

--text-selected: none;

user-select: none;

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;

이렇게 하면 하이픈이 있든 없든 속성의 목적이 무엇인지 구분할 수 있습니다.

변수 값

변수에 할당할 수 있는 값은 시퀀스에 속성에서 허용하지 않는 값이 포함되지 않는 한 하나 이상의 값의 시퀀스가 ​​될 수 있는 모든 속성 값에 해당하는 값과 동일합니다. 단순히 잘못된 값입니다.

--horizontal: left;
--text-color: #0000ff;
--shadow: 0 0 10px #3a3939, 0 0 20px #666565;
--gradient: linear-gradient(90deg, #3c719e 0%, #2323ab 35%);

Embora existam semelhanças entre as variáveis CSS e propriedades CSS, ambas têm propósitos e funcionalidades diferentes, enquanto uma é usada para armazenar e reutilizar valores, a outra define estilos específicos para elementos individuais.

Herança da Variável

As variáveis CSS podem ser herdadas, assim como as propriedades normais do CSS, isso significa, que ao definir um valor para uma variável em um elemento, ela será aplicada automaticamente a todos os elementos que forem descendentes desse mesmo elemento, a menos que eles definam um novo valor.

Como, por exemplo:

.father {
    --font-small: 16px;
}

.child-1 {
    --font-small: 3.4em;
}

<div class="father">
    <div class="child-1"></div>
    <div class="child-2"></div>
</div>

No exemplo acima, o resultado para cada elemento será:

• Para o elemento com a classe .father será definido: 16px.
• Para o elemento com a classe .child-1 será definido: 3.4em.
• Para o elemento com a classe .child-2 será definido o valor herdado do elemento pai: 16px.

Por conta disso, toda vez que você usar uma variável em um determinado elemento, tanto este elemento quanto os elementos dentro dele, também poderão ter os mesmos valores definidos na variável.

---

Escopo da variável

As variáveis CSS possuem como escopo os elementos em que as mesmas foram declaradas. O escopo nada mais é que a área ou contexto em que uma variável pode ser acessada e utilizada.

Existem dois tipos de escopos para as variáveis o escopo Global e Local. As variáveis de escopo global é uma variável que está disponível para ser usada em todo o documento, enquanto as variáveis de escopo local, limita o uso da variável em elementos específicos.

Escopo da Global

É muito útil o escopo global para tornar uma variável CSS acessível para todos os elementos do documento.

Como, por exemplo:

:root {
    --bg-dark: #1b1a1a;
}

#first-box {
    background-color: var(--bg-dark);
}

#second-box {
    background-color: var(--bg-dark);
}

No exemplo acima, a variável --bg-dark foi declarada no escopo da pseudo-classe :root, isso significa, que essa variável vai estar disponível para qualquer elemento. Faz sentido, declarar neste caso a variável no escopo global já que na página pode existir vários elementos com um design escuro.

A pseudo-classe :root é comumente utilizada para a declaração de variáveis, isso porque, ela é semelhante à raiz de uma árvore e basicamente se refere ao elemento que faz com que todos os outros elementos do documento fiquem contidos dentro dele, assim como os ramos e nós de uma árvore estão contidos na raiz da árvore.

Ao utilizar a pseudo-classe :root para declarar as suas variáveis, lembre-se que ela é semelhante ao seletor de elemento html, exceto que ela possui a especificidade mais alta de 0–0–1–0, enquanto o seletor htmlpossui a especificidade mais baixa de 0–0–0–1.

Escopo Local

O escopo local é a limitação que uma variável CSS vai ter para ser acessível dentro de um determinado elemento.

Como, por exemplo:

#third-box {
    --bg-info: #00ff00;
    background-color: var(--bg-info);
}

#fourth-box {
    background-color: var(--bg-info);
}

No exemplo acima, a variável --bg-info foi declarada no escopo do elemento que possui o id (#third-box), isso significa, que essa variável só vai estar disponível dentro deste elemento, ou seja, a cor de fundo só vai ser aplicada nele ou nos elementos dentro dele.

Enquanto ao tentar chamar a mesma variável para o elemento com id (#fourth-box) ela é "especificada como não definida" e a cor de fundo não será aplicada. Se você tiver a certeza que apenas alguns elementos na página vai receber um estilo específico, faz sentido usar o escopo local no elemento pai desses elementos.

Dependendo da sua necessidade, você pode declarar a variável com o mesmo nome ou com outros valores diferentes para elementos distintos:

#third-box {
    --bg-info: #00ff00;
    background-color: var(--bg-info);
}

#fourth-box {
    --bg-info: #0000ff;
   background-color: var(--bg-info);
}

No exemplo acima, as variáveis estão sendo declaradas em escopos diferentes (cada variável possui o seu próprio escopo), isso quer dizer que não são as mesmas variáveis.

---

Função var()

Como foi visto anteriormente nos exemplos, a função var() do CSS é usada para referenciar e aplicar os valores das variáveis CSS em diferentes propriedades ao longo do código:

:root {
    --text-dark: #0e0e0e;
}

.section-alert {
    color: var(--text-dark);
}

Mas, existe uma funcionalidade a mais que cerca essa função que é o valor de fallback que veremos logo a seguir, no qual pode ser útil ao trabalhar com Custom elements e Shadow DOM.

Valor de Fallback

O valor de fallback é um valor alternativo na função var() usado quando a variável fornecida não estiver definida ou for inválida.

A sintaxe é bem simples, a função var() aceita dois argumentos separados por uma vírgula, por tanto, o primeiro argumento é o nome da variável e caso for definido um segundo argumento ele será o valor de fallback que será usado no lugar da variável indisponível.

Como, por exemplo:

.section-alert {
    color: var(--text-dark, #202020);
}

No exemplo acima, se a variável text-dark não estiver disponível o valor #202020 será utilizado na propriedade.

Entenda que o valor de fallback não é usado para oferecer um valor alternativo para navegadores que não oferecem suporte a variáveis e sim, para navegadores que oferecem suporte a variáveis para que o mesmo possa escolher um valor diferente se a variável fornecida não estiver definida ou tiver um valor inválido.

Múltiplos Valores de Fallback

Como a função var() aceita apenas dois argumentos, caso você faça algo semelhante ao exemplo abaixo será considerado inválido:

.section-info {
    color: var(--text-dark, #202020, #454545);
}

Porém, você consegue fornecer mais de um valor de fallback, definindo no segundo argumento da função var() outra função var():

.section-info {
    color: var(--text-dark, var(--text-normal, #454545));
}

No exemplo acima, caso a variável --text-dark esteja indisponível será usado a variável --text-normal e que por sua vez, se também não estiver disponível será usado o valor de argumento #454545.

---

Valores Inválidos de Propriedades e Variáveis

Se você tentar atribuir um valor qualquer a uma propriedade normal que seja inválido, quando o navegador encontrar este valor ele simplesmente vai descartar e os elementos vão receber os valores que teriam se a declaração simplesmente não existisse.

Como, por exemplo:

div {
    background-color: orange;
}

div {
    background-color: 4rem;
}

No exemplo acima, foi especificado o valor de 4rem a propriedade background-color da segunda regra, esse valor definitivamente está incorreto já que essa propriedade e todas as propriedades do CSS aceita um determinado conjunto de valores válidos. O valor 4rem é comum e pode ser utilizado em propriedades como font-size, padding, margine etc.

Nesse caso, por conta do valor ser inválido para essa propriedade a declaração é descartada e o resultado é como se a regra não existisse ou seja, a primeira regra será aplicada e a cor de fundo da div ficará laranja.

Isso ocorre, porque o navegador segue as regras da cascata no processamento e renderização de estilos. Quando várias regras se aplicam ao mesmo elemento, o navegador precisa determinar qual delas deve prevalecer. Essas regras são brevemente avaliadas com base em sua especificidade e ordem de precedência (no caso do exemplo anterior pelo fato das duas regras terem seletores com a mesma especificidade foi levado em conta a ordem de precedência).

Por tanto, quando o navegador encontra uma declaração com um valor inválido para uma propriedade normal, ele entende que essa declaração não é válida e a descarta. O navegador então passa para a próxima declaração que seja possivelmente válida. Se não houver mais nenhuma declaração aplicável, o navegador utiliza o valor herdado ou inicial do elemento.

Isso garante, uma melhor experiência de navegação estável e confiável para os usuários, evitando que os elementos sejam exibidos de forma confusa ou não intencional quando não há declarações de estilo explícitas.

No entanto, as variáveis vão se comportar de maneira diferente em relação as propriedades normais. Quando o navegador encontra uma função var() referenciando uma variável inválida, o valor inicial ou herdado da propriedade é usado.

O exemplo abaixo é exatamente o do exemplo anterior, exceto que é usado uma variável:

:root {
    --bg-color: 4rem;
}

div {
    background-color: orange;
}

div {
    background-color: var(--bg-color);
}

Nesse caso, o valor 4rem da variável é inválido para a propriedade background-color da última regra e a ordem de precedência não será levada em consideração aqui, ou seja, a cor orange da segunda regra não será aplicada. Como a propriedade background-color não é herdável, o navegador aplicará o valor inicial dessa propriedade, que é transparente ou rgba(0, 0, 0, 0).

---

Conclusão

Essas são as variáveis CSS que podem ser usadas em diversos momentos e situações para fornecer maior flexibilidade e reutilização de código. Portanto, se você precisar definir valores comuns, trabalhar com responsividade ou criar temas e personalização, pode ser muito útil utilizar variáveis CSS. Elas não apenas simplificam o processo de manutenção do código, mas também tornam o design mais consistente e fácil de ajustar conforme necessário. Adotar variáveis CSS é uma prática inteligente que pode elevar a eficiência e a qualidade de seus projetos de desenvolvimento web.

위 내용은 동적 스타일을 생성하여 CSS 코드 가독성 및 유지 관리성을 향상시킵니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!