CSS 변수 소개

Sass와 같은 프로세서를 그다지 매력적이지 않게 만드는 특징 중 하나는 변수를 사용할 수 있다는 것이다.최근에 나는 변수를 어떻게 하면 우리의 CSS가 매우 큰 유지보수성을 가지게 할 수 있는지 연구하는 글을 썼다.누가 변수를 사용할 것 같습니까?우리만의 CSS.이것은 우리가 변수를 사용할 어떠한 프로세서도 사용할 필요가 없다는 것을 의미한다.
CSS에서 변수를 사용자 정의 속성이라고 합니다.'변수' 를 입력하는 것이 때때로 '사용자 정의 속성' 을 입력하는 것보다 쉽기 때문에, 나는 본문에서 그것들을 번갈아 사용할 것이다.이 문서에서는 CSS 변수를 선언하고 사용하는 방법에 대해 설명합니다.먼저 CSS 변수로 해결된 문제를 살펴보겠습니다.
문제.
값은 종종 CSS 파일에서 중복되어 응용 프로그램의 모양을 일치시킵니다.이 값들은 색깔일 수도 있고, 심지어는 글꼴 크기일 수도 있다.이러한 가치관을 기억하는 것은 결코 항상 쉬운 것은 아니다.내 말은 색의 이름을 기억하는 것이 색 코드를 기억하는 것보다 쉽다는 것이다.만약 이 값들이 변수에 저장되고 변수 이름만으로 호출될 수 있다면 사용하기가 훨씬 쉬워질 것이다.
이러한 값을 변경하는 경우 또 다른 문제가 발생합니다.잘못된 색을 계속 사용하고 그 색의 모든 실례를 바꾸기를 원한다고 가정하십시오.찾기와 교체는 완벽한 해결 방안인 것 같지만, 특히 대형 CSS 파일에서는 항상 이상적이지 않다.색상이 변수에 저장된 경우 한 번만 변경하면 색상을 사용하는 모든 속성에 영향을 줍니다.
CSS 변수를 사용하는 이유는 무엇입니까?
그런데 왜 CSS 변수인가요?왜 프로세서를 직접 사용하지 않습니까?다음과 같은 몇 가지 이유가 있습니다.

사전 프로세서가 필요하지 않습니다.네, 이것은 합리적인 이유입니다.

그것들은 겹쳐 내려간다.사전 처리기와 달리 선택기에서 변수를 설정하여 현재 값을 설정하거나 무시할 수 있습니다.따라서 CSS 변수를 사용할 여지가 없습니다.

응답 속성을 만들기 위해 미디어 조회와 함께 사용할 수 있습니다.

런타임에 변경할 수 있습니다.즉, JavaScript를 사용하여 CSS 변수에 액세스하고 조작할 수 있습니다.

이제 CSS 변수를 사용하는 방법을 살펴보겠습니다.
CSS 변수 사용
CSS 변수를 사용하려면 다음 두 가지를 알아야 합니다.

CSS 변수를 선언하는 방법

CSS 변수를 사용하는 방법

우리 첫 번째부터 시작합시다.
사용자 정의 속성의 구문
사용자 정의 속성을 설명하는 문법은 매우 간단하다.여기에 예가 하나 있다.

    --primary-color: #00AEEF;

우리는 방금 사용자 정의 속성을 신고했다.사용자 정의 속성에 대한 문법은 다음과 같은 몇 가지를 주의해야 합니다.

사용자 정의 속성의 이름 앞에 항상 두 개의 대시--를 붙여야 합니다.

사용자 정의 속성은 대소문자를 구분합니다.그래서 --primary-color는 --Primary-color와 다르다.

기왕 우리가 이 점을 알았으니, 다음은 사용자 정의 속성의 중요한 특성을 토론할 것이다.
폭포
사용자 정의 속성은 정상적인 등급 연결 규칙을 따르기 때문에 서로 다른 특정 단계에서 같은 속성을 정의하거나 설정할 수 있습니다.사용자 정의 속성이 상속될 수 있음을 반드시 주의하십시오.따라서 주어진 요소의 사용자 정의 속성에 값을 설정하지 않으면 부모 요소의 값을 계승합니다.하나의 예를 보십시오.

    :root { --color: blue}
    div { --color: green}
    p{ --color: red}

    * { color: var(--color)}

위의 예에서 div와 p 요소는 --color 변수에 재배치된 색상 값을 사용합니다.div와 p 원소의 하위 원소가 아닌 다른 원소는 :root 위류의 색을 사용하는데 이 위류는 그들의 부원소이다.
등급 연결은 매우 중요하다. 왜냐하면 우리는 미디어 조회를 통해 같은 변수에 서로 다른 값을 설정할 수 있기 때문이다.이것은 프로세서에서는 불가능합니다.예를 들자.

    --width: 80%
    @media screen and (min-width: 768px) and (max-width: 1020px) {
        --width: 60%;
    }
    @media screen and (min-width: 1020px) {
        --width: 40%
    }

변수--width는 각기 다른 값이 할당되어 있으며, 이 변수를 사용할 때마다 화면 크기에 맞는 값이 사용됩니다.이렇게 하면 CSS 변수가 유용하고 응답 설계에 도움이 됩니다.문법에 관해서는 이미 충분히 말했으니, 우리는 그것을 실제로 사용하는 부분으로 돌아가자.
CSS 변수 사용
성명된 변수를 사용하려면 var() 함수를 사용합니다.당신은 이미 본문의 첫 번째 예시에서 보았을 것입니다.var() 함수의 역할은 변수를 가져와 그 변수의 값으로 자신을 바꾸는 것이다.여기에 예가 하나 있다.

    --padding: 10px 20px;

    div {
        padding: var(--padding);
    }

var(--padding)가 10px 20px로 교체됩니다.var 함수의 실제 구문은 다음과 같습니다.

    var(<custom-property-name> [, <declaration-value> ]? )

여기서 custom-property-name는 선언된 변수의 이름입니다. 예를 들어 이전 예에서 --padding, 그리고 <declaration-value>는 반환 값입니다. 즉, 참조된 사용자 정의 속성이 유효하지 않으면 사용해야 하는 값입니다.아래의 예를 보십시오.

    p {
        font-family: var(--primary-font,  "sans-serif")
    }

따라서 --primary-font의 값이 유효하지 않거나 선언된 적이 없을 경우 예비(fallback) 글꼴sans-serif을 사용합니다.여러 값을 대체 값으로 사용할 수도 있습니다.이러한 값은 쉼표로 구분됩니다.앞의 예를 다시 쓰자.

    p {
        font-family: var(--primary-font, "Lato", "Roboto", "sans-serif")
    }

그러나 속기 값의 경우, 예를 들어 경계와 충전기와 함께 사용하는 값은 쉼표로 구분하지 않습니다.따라서 적절한 퇴로는 다음과 같다.

    p {
        margin: var(--margin, 10px 20px 5px)
    }

쉼표로 그것들을 구분할 필요가 없다.
Calc() 함수 사용
사용자 정의 속성도 CSScalc() 함수와 함께 사용할 수 있어 더욱 재미있게 사용할 수 있다.calc 함수는 CSS에서 계산을 실행하는 데 사용됩니다.사용자 정의 속성에 어떻게 사용하는지 보여 줍니다.

    :root {
        --margin: 2rem;
    } 

    div {
        margin: calc(var(--margin) * 2);
    }

    p {
        margin: var(--margin)
    }

브라우저 지원
현재 크롬 49, 엣지 16, Firefox 42, Safari 9.1, iOS Safari 9.3에서 사용자 정의 속성을 지원하고 있다.
CSS 변수에 대한 더 많은 정보를 얻기 위해, 여기에 그것에 대한 좋은 글이 있습니다.
CSS Variables: Why you should care?
CSS Variables — No, really!
Why I'm Excited About Native CSS Variables
질문이나 보충이 있습니까?메모 남겨주세요.
읽어 주셔서 감사합니다.