CSS 변수 var()의 사용법은 무엇입니까? CSS 변수 var() 사용법에 대한 자세한 설명

웹 프로젝트가 커지면 CSS가 천문학적으로 커지고 복잡해질 수 있습니다. 이 문제를 해결하는 데 도움이 되도록 새로운 CSS 변수가 곧 주요 브라우저에 나타나 개발자가 반복되는 CSS 속성을 재사용하고 쉽게 편집할 수 있게 됩니다. SASS나 Less를 사용해 본 사람이라면 그 변수 기능이 얼마나 뛰어난지 알겠지만, 이러한 변수는 전처리기이므로 사용하기 전에 컴파일해야 합니다. 이제 바닐라 CSS에서 변수를 사용할 수 있으므로 브라우저에서 즉시 사용할 수 있습니다! [추천 자료: CSS 튜토리얼]

CSS 변수 정의 및 사용

다른 CSS 정의와 마찬가지로 변수는 동일한 범위 지정 및 상속 규칙을 따릅니다. 이를 사용하는 가장 쉬운 방법은 다른 모든 선택자가 이를 상속할 수 있도록 :root 의사 클래스에 선언을 추가하여 전역적으로 사용할 수 있도록 만드는 것입니다.

html:

:root {
  --awesome-blue：＃2196F3;
}

변수의 값에 액세스하려면 var(…) 구문을 사용할 수 있습니다. 이름은 대소문자를 구분하므로 –foo != –FOO입니다.

.element {
background-color:var(--awesome-blue);
}

브라우저 지원

IE를 제외하고 일반적으로 사용되는 브라우저는 완벽하게 지원됩니다. 자세한 내용은 [CSS 변수를 사용할 수 있습니다](https://caniuse.com/#search=var( ))에서 확인할 수 있습니다. 다음은 CSS 변수의 일반적인 사용을 보여주는 몇 가지 예입니다. 제대로 작동하는지 확인하려면 위에서 언급한 브라우저 중 하나에서 확인해 보세요.

예 1 – 테마 색상

CSS의 변수는 테마에서 색상을 반복하는 것과 같이 여러 요소에 동일한 규칙을 반복해서 적용해야 할 때 가장 유용합니다. 동일한 색상을 재사용하고 싶을 때마다 복사하여 붙여넣는 대신 변수에 넣고 거기에서 액세스합니다.

이제 고객이 우리가 선택한 파란색 음영을 좋아하지 않으면 한 곳에서 스타일(변수 정의)을 변경하여 전체 테마의 색상을 변경할 수 있습니다. 변수가 없으면 모든 항목을 수동으로 검색하고 바꿔야 합니다.

코드를 복사하여 편집기에서 테스트할 수 있습니다

* {margin: 0;padding: 0;box-sizing: border-box;}html {padding: 30px;font: normal 13px/1.5 sans-serif;color: #546567;background-color: var(--primary-color);}.container {background: #fff;padding: 20px;}h3 {padding-bottom: 10px;margin-bottom: 15px;}p {background-color: #fff;margin: 15px 0;}button {font-size: 13px;padding: 8px 12px;background-color: #fff;border-radius: 3px;box-shadow: none;text-transform: uppercase;font-weight: bold;cursor: pointer;opacity: 0.8;outline: 0;}button:hover {opacity: 1;}
<!-- 分割线 -->:root {
--primary-color: #B1D7DC;
--accent-color: #FF3F90;
}
html {
background-color: var(--primary-color);
}
h3 {
border-bottom: 2px solid var(--primary-color);
}
button {
color: var(--accent-color);
border: 1px solid var(--accent-color);
}

<div class="container">
<h3>对话框窗口</h3>
<p>过放荡不羁的生活，容易得像顺水推舟，但是要结识良朋益友，却难如登天。</p>
<button>确认</button>
</div>

예 2 – 속성 클래스 이름 가독성

변수의 또 다른 중요한 용도는 더 복잡한 속성 값을 저장하려고 할 때 기억할 필요가 없다는 것입니다. . 가장 좋은 예는 CSS 규칙 상자 그림자, 변환 및 글꼴과 같은 여러 매개변수를 갖는 것입니다.

변수에 속성을 넣으면 의미상으로 읽을 수 있는 이름을 사용하여 속성에 액세스할 수 있습니다.

html{background-color: #F9F9F9;}
ul{padding: 20px;list-style: none;width: 300px;}
li{font: normal 18px sans-serif;padding: 20px;transition: 0.4s;margin: 10px;color: #444;background-color: #fff;cursor: pointer;}
<!-- 分割线 -->
:root{
--tiny-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
--animate-right: translateX(20px);
}
li{
box-shadow: var(--tiny-shadow);
}
li:hover{
transform: var(--animate-right);
}

<ul>
<li>我在这里!</li>
<li>我在这里!</li>
<li>我在这里!</li>
</ul>

예 3 – 동적으로 변경되는 변수

표준 규칙은 사용자 정의 속성이 여러 번 선언될 때 충돌을 해결하는 데 도움이 되며, 스타일시트에 정의된 마지막 속성이 위에 정의된 속성을 재정의합니다.

아래 예는 사용자가 코드를 명확하고 간결하게 유지하면서 속성을 동적으로 변경하는 것이 얼마나 쉬운지 보여줍니다.

.container{background: #fff;padding: 20px;}
p{transition: 0.4s;}
.title{font-weight: bold;}
<!-- 分割线 -->
.blue-container{
--title-text: 18px;
--main-text: 14px;
}
.blue-container:hover{
--title-text: 24px;
--main-text: 16px;
}
.green-container:hover{
--title-text: 30px;
--main-text: 18px;
}
.title{
font-size: var(--title-text);
}
.content{
font-size: var(--main-text);
}

<div class="blue-container">
<div class="green-container">
<div class="container">
<p class="title">这是个标题</p>
<p class="content">将鼠标悬停在不同的颜色区域上可以更改此文本和标题的大小。</p>
</div>
</div>
</div>

[示例地址](https://codepen.io/w3cbest/pen/OrxLLE)
正如您所看到的，CSS变量非常简单易用，开发人员不必花费太多时间在各处开始应用它们。以下是扩展内容：
var()函数有两个参数，如果自定义属性失败，它可用于提供回退值：

width``: var(–custom-width, 20%``);

사용자 정의 속성은 중첩될 수 있습니다:

*   –base-color: #f93ce9;
*   –background-gradient: linear-gradient(to top, var(–base-color), #444);

변수는 CSS에 또 다른 새로운 추가 기능인 calc() 함수와 함께 사용할 수 있습니다.

*   –container-width: 1000px;
*   max-width: calc(var(–container-width) / 2);

위 내용은 CSS 변수 var()의 사용법은 무엇입니까? CSS 변수 var() 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!