CSS 변수에 대해 잘 알고 계시나요? 익숙하지 않더라도 걱정하지 마세요! 다음 기사에서는 CSS 변수를 소개하고 5가지 예제를 사용하여 CSS 변수에 익숙해지도록 하겠습니다.
웹 애플리케이션이 커질수록 CSS는 더 커지고, 더 장황해지고, 복잡해집니다. 좋은 맥락에서 CSS 변수를 사용하면 반복되는 CSS 속성을 재사용하고 쉽게 변경할 수 있는 메커니즘이 제공됩니다.
순수 CSS가 변수를 지원하기 전에는 Less 및 Sass와 같은 전처리기가 있었습니다. 그러나 사용하기 전에 컴파일해야 하므로 (때때로) 복잡성이 추가됩니다.
CSS 변수(사용자 정의 속성이라고도 함) 정의 및 사용 방법
간단한 JS 변수를 선언하려면 다음과 같이 매우 간단합니다.
let myColor = "green";
로그인 후 복사
CSS 변수를 선언하려면 변수 이름 앞에 추가해야 합니다. 변수 두 개의 수평선.
body {
--english-green-color: #1B4D3E;
}로그인 후 복사
이제 CSS 변수의 값을 사용하기 위해 var(...) 함수를 사용할 수 있습니다. var(...)函数。
.my-green-component{
background-color: var(--english-green-color);
}로그인 후 복사
管理CSS变量的最简单方法是将它们声明在:root伪类中。 鉴于CSS变量与其他CSS定义一样都遵循规则，因此将它们放在:root中将确保所有选择器都可以访问这些变量。
:root{
--english-green-color: #1B4D3E;
}로그인 후 복사
览器对CSS变量的支持情况
浏览器对CSS变量的支持一点也不差。 如果查看 Can I Use CSS Variables 那会发现所有主流浏览器都支持CSS变量。 无论是在移动设备还是 PC 上。
现在，让我们看看这些CSS变量的实际作用。
示例1-管理颜色
使用CSS变量的最佳选择之一就是设计的颜色。 不必一遍又一遍地复制和粘贴相同的颜色，我们只需将它们放在变量中即可。
如果有该死的产品要我们更新特定的绿色阴影或将所有按钮设置为红色而不是蓝色，则只需更改该CSS变量的值即可。 我们无需搜索并替换所有出现的该颜色。
动手试试：https://codesandbox.io/s/8kkyl4mlm9?from-embed
示例2-删除重复的代码
通常我们需要构建一些组件的不同变体。相同的基本样式，只是功能略有不同。我们举例使用一个带有不同颜色按钮的案例。
.btn {
border: 2px solid black;
// more props here
}
.btn:hover {
background: black;
// more props here
}
.btn.red {
border-color: red
}
.btn.red:hover {
background: red
}로그인 후 복사
像这样使用它们：
<button class="btn">Hello</button>
<button class="btn red">Hello</button>
로그인 후 복사
但是，这会增加一些代码重复。在.red类中，我们必须将边框颜色和背景都设置为红色。万一哪天需要更改颜色，那就很麻烦了，需要一个一个的改。这个问题可以通过CSS变量轻松解决。
.btn {
border: 2px solid var(--color, black);
}
.btn:hover {
background: var(--color, black);
}
.btn.red {
--color: red
}로그인 후 복사
动手试试：https://codesandbox.io/s/yp29qoyvyx?from-embed=&file=/base.css
示例3-使某些属性易于阅读
如果我们想为更复杂的属性值创建快捷方式，那么CSS 变量非常有用，这样我们就不必记住它了。
CSS属性，如box-shadow、transform和font
// 主要代码
:root {
--tiny-shadow: 4px 4px 2px 0 rgba(0, 0, 0, 0.8);
--animate-right: translateX(20px);
}
li {
box-shadow: var(--tiny-shadow);
}
li:hover {
transform: var(--animate-right);
}로그인 후 복사
CSS 변수를 관리하는 가장 쉬운 방법은 해당 변수를
:root 의사 클래스에서 선언하는 것입니다. CSS 변수는 다른 CSS 정의와 동일한 규칙을 따르므로
:root에 배치하면 모든 선택기가 이러한 변수에 액세스할 수 있습니다.
// 主要代码
.orange-container {
--main-text: 18px;
}
.orange-container:hover {
--main-text: 22px;
}
.red-container:hover {
--main-text: 26px;
}
.title {
font-size: var(--title-text);
}
.content {
font-size: var(--main-text);
}
.container:hover {
--main-text: 18px;
}로그인 후 복사
CSS 변수에 대한 브라우저 지원
CSS 변수에 대한 브라우저 지원은 전혀 나쁘지 않습니다. Can I Use CSS Variables를 보면 모든 주요 브라우저가 CSS 변수를 지원한다는 것을 알 수 있습니다. 모바일이든 PC이든 말이죠.
지금 , 이러한 CSS 변수가 실제로 무엇을 하는지 살펴보겠습니다.
예 1 - 색상 관리CSS 변수를 사용하는 가장 좋은 옵션 중 하나는 디자인 색상입니다. 동일한 색상을 계속해서 복사하여 붙여넣는 대신 변수에 넣을 수 있습니다.
특정 녹색 음영을 업데이트하거나 모든 버튼을 파란색 대신 빨간색으로 만들려는 제품이 있는 경우 해당 CSS 변수의 값을 변경하면 됩니다. 해당 색상이 나타나는 모든 항목을 검색하고 바꿀 필요는 없습니다.
직접 시도해 보세요: https://codesandbox.io/s/8kkyl4mlm9?from-embed
예제 2 - 중복 코드 제거
종종 일부 구성 요소의 다양한 변형을 구축해야 하는 경우가 있습니다. 기본 스타일은 동일하지만 기능이 약간 다릅니다. 다양한 색상의 버튼을 예로 들어 보겠습니다.
:root {
--color: blue;
--COLOR: red;
}
/*--color and --COLOR are two different variables*/로그인 후 복사
로그인 후 복사
다음과 같이 사용하세요:
width: var(--custom-width, 33%);
로그인 후 복사
로그인 후 복사
그러나 이렇게 하면 일부 코드 중복이 추가됩니다.
.red 클래스에서는 테두리 색상과 배경을 모두 빨간색으로 설정해야 합니다. 언젠가 색상을 변경해야 한다면 매우 번거로우며 하나씩 변경해야 합니다. 이 문제는 CSS 변수를 사용하여 쉽게 해결할 수 있습니다.
<!--HTML-->
<html style="--size: 600px">
로그인 후 복사
로그인 후 복사
직접 시도해 보세요: https://codesandbox.io/s/yp29qoyvyx?from-embed=&file=/base.css
예 3 - 일부 속성을 읽기 쉽게 만듭니다.🎜🎜몇 가지 속성을 만들고 싶다면 더 복잡한 CSS 변수는 속성 값에 대한 바로가기를 생성하여 기억할 필요가 없도록 하는 데 매우 유용합니다. 🎜🎜 box-shadow, transform 및 font와 같은 CSS 속성이나 여러 매개변수가 있는 기타 CSS 규칙이 좋은 예입니다. 🎜🎜더 읽기 쉬운 형식으로 재사용할 수 있도록 속성을 변수에 넣을 수 있습니다. 🎜body {
max-width: var(--size)
}로그인 후 복사
로그인 후 복사
--base-red-color: #f00;
--background-gradient: linear-gradient(to top, var(--base-red-color), #222);
로그인 후 복사
로그인 후 복사
扩展
就像CSS中几乎所有东西一样，变量也非常简单易用。 以下是一些未包含在示例中的技巧，但在某些情况下仍然非常有用：
注意大写，CSS变量区分大小写
:root {
--color: blue;
--COLOR: red;
}
/*--color and --COLOR are two different variables*/로그인 후 복사
로그인 후 복사
当我们使用var()函数时，还可以传入第二个参数。 如果找不到自定义属性，则将使用此值：
width: var(--custom-width, 33%);
로그인 후 복사
로그인 후 복사
可以将CSS变量直接用于HTML
<!--HTML-->
<html style="--size: 600px">
로그인 후 복사
로그인 후 복사
body {
max-width: var(--size)
}로그인 후 복사
로그인 후 복사
可以在其他CSS变量中使用CSS变量：
--base-red-color: #f00;
--background-gradient: linear-gradient(to top, var(--base-red-color), #222);
로그인 후 복사
로그인 후 복사
可以通过媒体查询将CSS变量作为条件。 例如，以下代码根据屏幕大小更改 padding 的值：
:root {
--padding: 15px
}
@media screen and (min-width: 750px) {
--padding: 30px
}로그인 후 복사
在calc()函数中也可以使用CSS变量。
--text-input-width: 5000px;
max-width: calc(var(--text-input-width) / 2);
로그인 후 복사
CSS 变量不是灵丹妙药。 它们不会解决我们在CSS领域中遇到的所有问题。 但是，它可以让我们的代码更具可读性和可维护性。
而且，它们极大地提高了跨大型文档进行更改的便利性。 只需将所有常量设置在一个单独的文件中，当我们只想对变量进行更改时，就不必跳过数千行代码。
原文地址：http://www.js-craft.io/blog/17-3-examples-of-using-css-variables/
作者：Daniel
更多编程相关知识，请访问：编程视频！！
위 내용은 CSS 변수에 익숙해질 수 있도록 5가지 예시를 단계별로 살펴보겠습니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
