CSS 변수 소개

Originally published on inspiredwebdev.com

CSS를 작성하는 것은 JavaScript와 같은 것을 작성하는 것에 비해 쉬운 작업처럼 보일 수 있습니다. 결국에는 스타일의 모음일 뿐입니다.

음, 그것은 일반적으로 사실이며 매우 복잡한 레이아웃을 사용하거나 특정 요구 사항이 있는 경우가 아니면 CSS를 선택하고 시작하기가 상당히 쉽습니다.

대규모 프로젝트가 있고 모든 페이지에서 스타일을 일관되게 유지하려는 경우 문제가 발생할 수 있습니다.
SASS를 사용하는 것이 너무 과하다고 느낄 수 있지만 여전히 값을 한 번 정의하고 여러 곳에서 재사용할 수 있기를 원합니다.

여기에서 CSS 변수가 도움이 될 것입니다.

기본 시나리오를 살펴보겠습니다.

.main-section {
    /* ...other styles */
    background-color: #3498db;
}

.primary-button {
    /* ...other styles */
    color: #3498db;
}

여기서 우리는 색상으로 두 가지 다른 클래스의 스타일을 지정합니다. 어느 날 해당 색상을 변경하려면 해당 색상에 대한 모든 언급을 교체해야 합니다. CSS 변수를 사용하면 코드를 단순화하여 다음과 같이 작성할 수 있습니다.

:root {
    --lightblue: #3498db;
}

.main-section {
    /* ...other styles */
    background-color: var(--lightblue);
}

.primary-button {
    /* ...other styles */
    background-color: var(--lightblue);
}

내가 여기서 한 일을 살펴보겠습니다.

문서의 모든 요소에서 사용할 수 있도록 의사 클래스:root 내부에 변수를 정의합니다

.

다음 구문을 사용하여 변수를 정의합니다. --NAME: VALUE

요소 내부에서 PROPERTY: var(VARIABLE_NAME)

구문과 함께 변수를 사용합니다.

이제 밝은 파란색을 다른 파란색 음영으로 변경하려는 경우 코드에서 한 곳만 변경하면 됩니다.

변수는 물론 색상에 국한되지 않습니다! 원하는대로 사용할 수 있습니다.

상자 그림자는 다른 요소에 복사하여 붙여넣기에는 꽤 길 수 있습니다. 변수를 사용하여 삶을 단순화할 수 있습니다.

:root {
    --shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

div {
    box-shadow: var(--shadow);
    -webkit-box-shadow:  var(--shadow);
    -moz-box-shadow:  var(--shadow);
}

원하는 경우 더 나아가 CSS 변수를 기본 CSS 함수인 calc() 와 결합하여 간단한 계산을 수행할 수도 있습니다.

다음과 같은 변수에서 컨테이너 및 헤더 높이를 정의했다고 가정해 보겠습니다.

:root {
    --container-height: 100%;
    --header-height: 60px;
}

.container {
    heigth: var(--container-height);
}

.header {
    height: var(--header-height);
}

우리는 콘텐츠가 항상 헤더 아래에 남아 있는 만큼의 공간을 차지하기를 원합니다. 다음과 같이 작성하면 됩니다.

.content {
    height: calc(100% - 60px);
}

하지만 변수를 활용하려면 어떻게 해야 할까요?

.content {
    height: calc(var(--conainer-height) - var(--header-height));
}

간단한 프로젝트에서 그렇게 하는 것은 지나친 것처럼 보일 수 있지만 스타일이 더 복잡해지기 시작하고 값을 여러 번 복사, 붙여넣기 및 편집하는 것을 보게 되는 경우 편집을 더 빠르고 쉽고 오류가 덜 발생하도록 변수를 만드는 것이 좋습니다. 조정할 지점은 한 곳뿐입니다.

CSS 변수와 calc()를 사용할 수 있습니까?

대답은 큰 예입니다. 할 수 있습니다. 이전 브라우저에 대한 지원을 제공해야 하는 경우가 아니면 이 두 속성은 모든 최신 브라우저에서 지원됩니다. caniuse.com에서 가져온 아래 두 개의 스크린샷을 볼 수 있습니다. IE에 대한 지원이 필요한 경우 CSS 변수https://www.npmjs.com/package/css-vars-ponyfill에 이 폴리필을 사용할 수 있습니다.





이제 컴퓨터에 있는 가장 지저분한 CSS 스타일시트를 열고 변수를 사용하여 정리를 시작합니다.



읽어주셔서 대단히 감사합니다. 자세한 내용은 내 블로그inspiredwebdev에서 나를 따르십시오.




Amazon 및 Leanpub에서 내 전자책 받기