CSS 변수에 익숙해질 수 있도록 5가지 예시를 단계별로 살펴보겠습니다!

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 }

像这样使用它们：

Hello Hello

但是，这会增加一些代码重复。在.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); }

// 主要代码 .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 변수에 대한 브라우저 지원은 전혀 나쁘지 않습니다. Can I Use CSS Variables를 보면 모든 주요 브라우저가 CSS 변수를 지원한다는 것을 알 수 있습니다. 모바일이든 PC이든 말이죠.

지금 , 이러한 CSS 변수가 실제로 무엇을 하는지 살펴보겠습니다.

예 1 - 색상 관리CSS 변수를 사용하는 가장 좋은 옵션 중 하나는 디자인 색상입니다. 동일한 색상을 계속해서 복사하여 붙여넣는 대신 변수에 넣을 수 있습니다.

특정 녹색 음영을 업데이트하거나 모든 버튼을 파란색 대신 빨간색으로 만들려는 제품이 있는 경우 해당 CSS 변수의 값을 변경하면 됩니다. 해당 색상이 나타나는 모든 항목을 검색하고 바꿀 필요는 없습니다.

종종 일부 구성 요소의 다양한 변형을 구축해야 하는 경우가 있습니다. 기본 스타일은 동일하지만 기능이 약간 다릅니다. 다양한 색상의 버튼을 예로 들어 보겠습니다.

:root { --color: blue; --COLOR: red; } /*--color and --COLOR are two different variables*/

로그인 후 복사

로그인 후 복사

width: var(--custom-width, 33%);

로그인 후 복사

로그인 후 복사

예 3 - 일부 속성을 읽기 쉽게 만듭니다.몇 가지 속성을 만들고 싶다면 더 복잡한 CSS 변수는 속성 값에 대한 바로가기를 생성하여 기억할 필요가 없도록 하는 데 매우 유용합니다. box-shadow, transform및 font와 같은 CSS 속성이나 여러 매개변수가 있는 기타 CSS 규칙이 좋은 예입니다. 더 읽기 쉬운 형식으로 재사용할 수 있도록 속성을 변수에 넣을 수 있습니다.

body { max-width: var(--size) }

로그인 후 복사

로그인 후 복사

직접 시도해 보세요: https://codesandbox.io/s/q3ww1znxn9?from-embed=&file=/css_vars.css:0-187예제 4레벨 연결된 변수 표준 계단식 규칙은 CSS 변수에도 적용됩니다. 사용자 정의 속성이 여러 번 선언되면 CSS 파일의 가장 낮은 정의가 그 위의 정의를 재정의합니다. 아래 예는 코드를 명확하고 간결하게 유지하면서 사용자 작업의 속성을 동적으로 조작하는 것이 얼마나 쉬운지 보여줍니다.

--base-red-color: #f00; --background-gradient: linear-gradient(to top, var(--base-red-color), #222);

로그인 후 복사

로그인 후 복사

직접 시도해 보세요: https://codesandbox.io/s/xj0qxn2l7w?from-embed=&file=/index.html예 5 - 테마 전환 및 CSS 변수CSS 변수 가장 큰 장점 중 하나는 반응성이 좋다는 것입니다. 업데이트하면 CSS 변수 값이 있는 모든 속성도 업데이트됩니다. 따라서 몇 줄의 Javascript와 CSS 변수를 영리하게 사용하면 테마 전환 메커니즘을 만들 수 있습니다. 직접 시도해 보세요: https://codesandbox.io/s/24j4m8y5kn?from-embed=&file=/scripts.js

扩展

就像CSS中几乎所有东西一样，变量也非常简单易用。 以下是一些未包含在示例中的技巧，但在某些情况下仍然非常有用：

注意大写，CSS变量区分大小写

:root { --color: blue; --COLOR: red; } /*--color and --COLOR are two different variables*/

当我们使用var()函数时，还可以传入第二个参数。 如果找不到自定义属性，则将使用此值：

width: var(--custom-width, 33%);

可以将CSS变量直接用于HTML

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!