CSS에서 변수 사용

웹 개발을 처음 배우기 시작했을 때 색상에 대해 동일한 16진수 코드를 반복해서 작성한 다음 색상이 변경되어야 한다는 것을 알아내고 모든 인스턴스를 찾기 위해 코드를 검색하는 것이 짜증스러웠던 것을 기억합니다. 엄청난 고통이었습니다! 당시 이것은 css preprocessors like Sass 및 Less가 스타일에 변수를 사용할 수 있게 했기 때문에 그다지 매력적이지 않은 문제점 중 하나였습니다.



다행스럽게도 우리는 똑똑하고 열정적인 사람들이 우리 도구로 할 수 있는 것의 한계를 뛰어넘는 웹 개발 기술의 황금기에 살고 있습니다. 이와 같이 엔지니어들은 평범하고 오래된 CSS를 개선하기 위해 열심히 노력했습니다. 이러한 개선 사항 중 하나는 .css 파일 내에서 변수를 사용할 수 있는 기능입니다! 이 기사에서는 css 파일에서 변수를 사용하는 방법과 제한 사항에 대해 설명합니다.

CSS 변수가 왜 중요한가요?

한동안 css를 작성했거나 작성하지 않았다면 코드 전체에 동일한 색상 값이 포함된 파일을 본 적이 있을 것입니다. 더 나쁜 것은 여러 파일에서 동일한 값을 사용하는 경우입니다. 단순히 거기에 두는 것은 그렇게 큰 문제가 아니지만 나중에 변경해야 하는 경우에는 어떻게 해야 합니까? 해당 색상의 모든 인스턴스를 찾아서 수동으로 변경해야 합니다. 그것은 또한 밝은 테마와 어두운 테마 같은 것을 하려고 한다면 클래스를 기반으로 각 테마에 대해 중복 코드를 작성해야 한다는 것을 의미합니다. 아래 코드를 고려하십시오.

body.light {
    background: #fff;
    color: #ff0000;
    font-size: 16px;
}

body.light button {
    background: #ff0000;
    color: #fff;
    border: 1px solid #ff0000;
}

body.dark {
    background: #222;
    color: #c0ffee;
    font-size: 16px;
}

body.dark button {
    background: #c0ffee;
    color: #222;
    border: 1px solid #c0ffee;
}

분명히 위의 코드는 변경하기에 그다지 큰 문제는 아니지만 이 파일이 계속해서 이러한 색상을 사용한다면 한 곳에서 변경하고 모든 곳에서 업데이트하는 것이 왜 유용한지 상상할 수 있습니다. 아래 코드는 이 코드가 변수와 함께 작동하는 방법을 보여줍니다.

body {
    background: var(--primary);
    color: var(--secondary);
    font-size: 16px;
}

button {
    background: var(--secondary);
    color: var(--primary);
    border: 1px solid var(--secondary);
}

예제에서 코드가 얼마나 간결한지 확인할 수 있습니다. 변수에 대한 값은 재할당이 가능하기 때문에 --primary 변수는 다른 값으로 코드를 복제하는 대신 본문 클래스를 기반으로 변경할 수 있습니다.

CSS에서 변수를 설정하는 방법

CSS에서 변수를 만들려면 변수의 범위를 결정해야 합니다. 변수 생성은 범위에 관계없이 동일하므로 아래 코드는 선택자가 달라도 어디에나 적용됩니다.

.sample-selector {
    --color: purple;
}

위의 예는 sample-selector 클래스로 요소를 만드는 방법을 보여줍니다. --color 요소의 모든 자식에서 .sample-selector 변수에 액세스할 수 있습니다. :root 요소를 대상으로 하는 html 선택기를 사용하여 전역 css 변수를 만들 수도 있습니다. 루트 선택자를 사용하는 --color 할당은 다음과 같습니다.

:root {
    --color: purple;
}

변수는 루트 요소에 할당되므로 문제 없이 스타일의 모든 위치에서 사용할 수 있습니다. 테마 사용 아이디어로 돌아가서 html 요소에 할당된 클래스에 따라 다른 변수 값을 설정할 수 있습니다. 다음과 같이 표시됩니다.

:root.light {
    --primary: #fff;
    --secondary: #ff0000;
}
:root.dark {
    --primary: #222;
    --secondary: #c0ffee;
}

이러한 방식으로 CSS 변수를 사용하면 각 요소에 밝은 테마와 어두운 테마 모두에 대한 스타일을 추가할 필요가 없습니다. 대신 지정된 요소에 할당된 테마 클래스를 기반으로 다른 값으로 변수를 사용하고 재사용할 수 있습니다.

제한 사항이 있습니까?

css 변수는 프런트 엔드 개발자의 많은 문제를 해결했지만 결함이 없는 것은 아닙니다. SCSS 또는 이와 유사한 것을 작성하는 데 시간을 보냈다면 미디어 쿼리를 처리하기 위해 변수와 믹스인을 사용했을 수 있습니다. 이것은 약간 안타까운 CSS 변수로는 할 수 없습니다. 또한 CSS 변수는 URL을 저장할 수 없습니다. 다른 위치에서 이미지를 재사용해야 하는 경우 유용하지만 작동하지 않습니다.

결론

전반적으로 CSS 변수는 스타일 내에서 매우 멋진 혁신입니다. 재사용 가능한 스타일을 작성하는 것뿐만 아니라 스타일을 업데이트하거나 나중에 확장하는 것도 매우 쉽습니다. 다음 프로젝트에서 확인하고 그에 대해 어떻게 생각하는지 확인하는 것이 좋습니다.

질문이 있으신가요? Twitter에서 나를 찾을 수 있습니다.