CSS 변수에 대해 알아야 할 사항! !-CSS 튜토리얼-php.cn

.section {
  border: 2px solid #235ad1;
}

.section-title {
  color: #235ad1;
}

.section-title::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #235ad1;
}

로그인 후 복사

이 스니펫에서는 #235ad1이 3번 사용되었습니다. 대규모 프로젝트의 경우 다양한 CSS 파일이 있는데 어느 날 색상을 변경하라는 요청을 받았다고 상상해 보세요. 우리가 할 수 있는 가장 빠른 일은 "찾기와 바꾸기"입니다. #235ad1使用了3次。想象一下，对于一个大型项目，不同的CSS文件，如果哪天被要求更改颜色。我们可以做的最好快的方式就是“查找并替换”。

使用CSS变量，可以更快解决这个问题。定义变量名需要用--开头。首先，我们现在将在:root或<html>元素中定义变量。

:root {
  --color-primary: #235ad1;
}

.section {
  border: 2px solid var(--color-primary);
}

.section-title {
  color: var(--color-primary);
}

.section-title::before {
  /* Other styles */
  background-color: var(--color-primary);
}

로그인 후 복사

是不是比前面的干净得多？ --color-primary变量是全局变量，因为我们在:root元素中定义了它。但是，我们还可以将变量范围限定到整个文档中的某些元素。

命名变量

与编程语言命名变量相似，CSS 变量的有效命名应包含字母数字字符，下划线和破折号。另外，值得一提的是 CSS 变量区分大小写。

/* 合法命名 */
:root {
    --primary-color: #222;
    --_primary-color: #222;
    --12-primary-color: #222;
    --primay-color-12: #222;
}

/* 非法命名 */
:root {
    --primary color: #222; /* Spacings are not allowed */
    --primary$%#%$#
}

로그인 후 복사

作用域

CSS 变量也有自己的作用域，这个概念类似于其他编程语言。以 JS 为例:

:root {
  --primary-color: #235ad1;
}

.section-title {
  --primary-color: d12374;
  color: var(--primary-color);
}

로그인 후 복사

变量element是全局的，因此可以在cool()函数内部访问。但是，只能在cool()函数中访问变量otherElement。

:root {
  --primary-color: #235ad1;
}

.section-title {
  --primary-color: d12374;
  color: var(--primary-color);
}

로그인 후 복사

变量--primary-color是全局变量，可以从文档中的任何地方访问。变量 --primary-color由于是在.section-title定义的，所以只能在.section-title中访问。

下面是一个比较直观的示例图片，可以加强我们的理解：

CSS 변수에 대해 알아야 할 사항! !

变量--primary-color用于标题颜色。我们想为作者名和最新文章标题自定义颜色，因此我们需要将--primary-color覆盖。这同样适用于--unit变量。

/* 全局变量 */
:root {
  --primary-color: #235ad1;
  --unit: 1rem;
}

/* section-title 默认的颜色和间距 */
.section-title {
  color: var(--primary-color);
  margin-bottom: var(--unit);
}

/* 覆盖 section-title 样式 */
.featured-authors .section-title {
  --primary-color: #d16823;
}

.latest-articles .section-title {
  --primary-color: #d12374;
  --unit: 2rem;
}

로그인 후 복사

回退方案

这里的回退不是不支持 CSS 变量的回退，而是 CSS 变量可以支持回退方案。考虑以下示例：

.section-title {
  color: var(--primary-color, #222);
}

로그인 후 복사

注意，var()有多个值。第二个#221只在变量--primary-color由于某种原因没有定义的情况下有效。不仅如此，我们还可以将var()嵌套到另一个var()中。

.section-title {
  color: var(--primary-color, var(--black, #222));
}

로그인 후 복사

在变量值依赖于某个动作的情况下，该特性非常有用。当变量没有值时，为它提供一个回退很重要。

用例一：控制组件的大小

CSS 변수에 대해 알아야 할 사항! !

在设计系统中，按钮通常有多种尺寸。通常，按钮可以具有三种尺寸（Small, normal, large）。使用 CSS 变量来实现它并不容易：

.button {
  --unit: 1rem;
  padding: var(--unit);
}

.button--small {
  --unit: 0.5rem;
}

.button--large {
  --unit: 1.5rem;
}

로그인 후 복사

通过在按钮组件作用域内更改变量--unit，我们创建了按钮的不同变体。

用例二：CSS 变量和 HSL 颜色

HSL代表色调，饱和度，亮度。色相的值决定了颜色，饱和度和亮度值可以控制颜色的深浅。

CSS 변수에 대해 알아야 할 사항! !

:root {
  --primary-h: 221;
  --primary-s: 71%;
  --primary-b: 48%;
}

.button {
  background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-b));
  transition: background-color 0.3s ease-out;
}

/* 使背景更暗 */
.button:hover {
  --primary-b: 33%;
}

로그인 후 복사

这里何通过减小变量--primary-b使按钮变暗。

用例三：比例调整

如果您使用过Photoshop，Sketch，Figma或Adobe XD之类的设计程序，那么我们会想在调整元素大小的同时按住Shift键以避免扭曲它。

在CSS中，没有直接的方法来做到这一点，但是我们有一个简单的解决方法，使用CSS变量。

CSS 변수에 대해 알아야 할 사항! !

假设有一个图标，并且其宽度和高度应该相等。我定义了变量--size

CSS 변수를 사용하면 이 문제를 더 빠르게 해결할 수 있습니다. 변수 이름 정의는 --로 시작해야 합니다. 먼저 :root 또는 <html> 요소에 변수를 정의하겠습니다. 🎜

.icon {
  --size: 22px;
  width: var(--size);
  height: var(--size);
}

로그인 후 복사

🎜이전보다 훨씬 깨끗해졌죠? --color-primary 변수는 :root 요소에서 정의했기 때문에 전역 변수입니다. 그러나 문서 전체에서 변수의 범위를 특정 요소로 지정할 수도 있습니다. 🎜

🎜이름이 지정된 변수🎜🎜🎜프로그래밍 언어의 변수 이름 지정과 유사하게 CSS 변수의 유효한 이름에는 영숫자 문자, 밑줄 및 대시가 포함되어야 합니다. 또한 CSS 변수는 대소문자를 구분한다는 점을 언급할 가치가 있습니다. 🎜

.wrapper {
  --item-width: 300px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
  grid-gap: 1rem;
}

.wrapper-2 {
  --item-width: 500px;

로그인 후 복사

🎜Scope🎜🎜🎜CSS 변수에도 자체 범위가 있으며 이 개념은 다른 프로그래밍 언어와 유사합니다. JS를 예로 들어보겠습니다. 🎜

wrapper {
  --item-width: 300px;
  --gap: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
}

.wrapper.gap-1 {
  --gap: 16px;
}

로그인 후 복사

🎜 element 변수는 전역 변수이므로 cool() 함수 내에서 액세스할 수 있습니다. 그러나 otherElement 변수는 cool() 함수 내에서만 액세스할 수 있습니다. 🎜

:root {
  --primary-gradient: linear-gradient(150deg, #235ad1, #23d1a8);
}

.element {
  background-image: var(--primary-gradient);
}

로그인 후 복사

🎜 --primary-color 변수는 전역 변수이며 문서의 어느 곳에서나 액세스할 수 있습니다. --primary-color 변수는 .section-title에 정의되어 있으므로 .section-title에서만 액세스할 수 있습니다. 🎜🎜다음은 이해를 높일 수 있는 보다 직관적인 예시 이미지입니다. 🎜🎜 CSS 변수에 대해 알아야 할 사항! !

🎜🎜변수 --primary-color는 제목 색상에 사용됩니다. 저자 이름 및 최신 기사 제목의 색상을 맞춤설정하려고 하므로 --primary-color를 재정의해야 합니다. --unit 변수에도 동일하게 적용됩니다. 🎜

.element {
  --angle: 150deg;
  background-image: linear-gradient(var(--angle), #235ad1, #23d1a8);
}

.element.inverted {
  --angle: -150deg;
}

로그인 후 복사

🎜롤백 구성표🎜🎜🎜 여기서 대체는 CSS 변수가 지원되지 않는다는 것이 아니라 CSS 변수가 대체 구성표를 지원할 수 있다는 것입니다. 다음 예를 고려하십시오. 🎜

.table {
  --size: 50px;
  --pos: left center;
  background: #ccc linear-gradient(#000, #000) no-repeat;
  background-size: var(--size) var(--size);
  background-position: var(--pos);
}

로그인 후 복사

🎜 var()에는 여러 값이 있다는 점에 유의하세요. 두 번째 #221는 어떤 이유로 --primary-color 변수가 정의되지 않은 경우에만 작동합니다. 뿐만 아니라 var()를 다른 var()에 중첩할 수도 있습니다. 🎜

:root {
  --text-color: #434343;
  --border-color: #d2d2d2;
  --main-bg-color: #fff;
  --action-bg-color: #f9f7f7;
}

/* 添加到`<html>`元素的类*/
.dark-mode {
  --text-color: #e9e9e9;
  --border-color: #434343;
  --main-bg-color: #434343;
  --action-bg-color: #363636;
}

로그인 후 복사

🎜이 기능은 변수 값이 작업에 따라 달라지는 상황에서 유용합니다. 값이 없는 변수에 대한 대체를 제공하는 것이 중요합니다. 🎜

🎜사용 사례 1: 구성 요소 크기 제어🎜🎜🎜 CSS 변수에 대해 알아야 할 사항! !

🎜🎜디자인 시스템에서 버튼은 다양한 크기로 제공되는 경우가 많습니다. 일반적으로 버튼의 크기는 세 가지(소형, 보통, 대형)일 수 있습니다. CSS 변수를 사용하여 이를 수행하는 것은 쉽지 않습니다. 🎜

.section.is-active {
  max-height: var(--details-height-open, auto);
}

로그인 후 복사

🎜 버튼 구성 요소 범위 내에서 --unit 변수를 변경하여 버튼의 다양한 변형을 만듭니다. 🎜

🎜사용 사례 2: CSS 변수 및 HSL 색상 🎜🎜🎜🎜HSL🎜은 색상, 채도, 밝기를 나타냅니다. 색상 값은 색상을 결정하고 채도와 밝기 값은 색상의 깊이를 제어합니다. 🎜🎜 CSS 변수에 대해 알아야 할 사항! !

🎜

.wrapper {
  --size: 1140px;
  max-width: var(--size);
}

.wrapper--small {
  --size: 800px;
}

로그인 후 복사

🎜 --primary-b 변수를 줄여 버튼을 더 어둡게 만드는 방법. 🎜

🎜사용 사례 3: 비율 조정🎜🎜🎜Photoshop, Sketch, Figma</code를 사용한 경우 > 또는 <code>Adobe XD와 같은 디자인 프로그램을 사용하는 경우 왜곡을 방지하기 위해 요소의 크기를 조정하는 동안 Shift 키를 누르는 것이 좋습니다. 🎜🎜CSS에서는 이를 직접 수행할 수 있는 방법이 없지만 CSS 변수를 사용하는 간단한 해결 방법이 있습니다. 🎜🎜 CSS 변수에 대해 알아야 할 사항! !

🎜🎜가설 아이콘이 있고 너비와 높이가 동일해야 합니다. 너비와 높이에 대한 변수 --size를 정의했습니다. 🎜

.icon {
  --size: 22px;
  width: var(--size);
  height: var(--size);
}

로그인 후 복사

现在，您只需更改--size变量的值即可模拟Shift调整大小的效果。

用例四：CSS Grid

CSS 变量对于网格非常有用。假设希望网格容器根据定义的首选宽度显示其子项。与为每个变体创建类并复制CSS相比，使用变量更容易做到这一点。

CSS 변수에 대해 알아야 할 사항! !

.wrapper {
  --item-width: 300px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
  grid-gap: 1rem;
}

.wrapper-2 {
  --item-width: 500px;

로그인 후 복사

这样，我们可以创建一个完整的网格系统，该系统灵活，易于维护，并且可以在其他项目中使用。可以将相同的概念应用于grid-gap属性。

wrapper {
  --item-width: 300px;
  --gap: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
}

.wrapper.gap-1 {
  --gap: 16px;
}

로그인 후 복사

CSS 변수에 대해 알아야 할 사항! !

用例五：全值声明，CSS 渐变

以全值表示，例如，类似渐变的东西。如果整个系统中使用渐变或背景，将其存储到CSS变量中可能是一件好事。

:root {
  --primary-gradient: linear-gradient(150deg, #235ad1, #23d1a8);
}

.element {
  background-image: var(--primary-gradient);
}

로그인 후 복사

或者我们可以存储一个值。以角度为例:

.element {
  --angle: 150deg;
  background-image: linear-gradient(var(--angle), #235ad1, #23d1a8);
}

.element.inverted {
  --angle: -150deg;
}

로그인 후 복사

CSS 변수에 대해 알아야 할 사항! !

用例六： Background Position

我们可以在 CSS 变量中包含多个值，这在需要根据特定上下文将元素放置在不同位置的情况下很有用。

CSS 변수에 대해 알아야 할 사항! !

.table {
  --size: 50px;
  --pos: left center;
  background: #ccc linear-gradient(#000, #000) no-repeat;
  background-size: var(--size) var(--size);
  background-position: var(--pos);
}

로그인 후 복사

用例七：在明暗模式之间切换

现在，网站比以往任何时候都更需要深色和浅色模式。使用CSS变量，我们可以存储它们的两个版本，并根据用户或系统偏好在它们之间切换。

CSS 변수에 대해 알아야 할 사항! !

:root {
  --text-color: #434343;
  --border-color: #d2d2d2;
  --main-bg-color: #fff;
  --action-bg-color: #f9f7f7;
}

/* 添加到`<html>`元素的类*/
.dark-mode {
  --text-color: #e9e9e9;
  --border-color: #434343;
  --main-bg-color: #434343;
  --action-bg-color: #363636;
}

로그인 후 복사

CSS 변수에 대해 알아야 할 사항! !

用例八：设置默认值

在某些情况下，您将需要使用JavaScript设置CSS变量。假设我们需要获取可扩展组件的高度。

变量--details-height-open为空，它将被添加到特定的HTML元素中。当JavaScript由于某种原因失败时，提供适当的默认值或后备值很重要。

.section.is-active {
  max-height: var(--details-height-open, auto);
}

로그인 후 복사

auto值是 JS 失败时的回退值，并且没有定义CSS变量——details-height-open。

用例九：控制 wrapper 宽度

网站wrapper 可以有多种变化。有时候是需要一个小包装一个页面，一个大包装另一个页面。在这种情况下，合并CSS变量可能是有用的。

.wrapper {
  --size: 1140px;
  max-width: var(--size);
}

.wrapper--small {
  --size: 800px;
}

로그인 후 복사

用例十一：动态网格项目

我们可以在style属性中添加--item-width变量，仅此而已。例如，这种方法可以帮助建立网格原型。

HTML

<div  style="--item-width: 250px;">
  <div></div>
  <div></div>
  <div></div>
</div>

로그인 후 복사

CSS

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
  grid-gap: 1rem;
}

로그인 후 복사

事例：https://codepen.io/shadeed/pen/7d3e0d575a5cecb86233fc7d72fa90d4

用例十二：用户头像

另一个有用的用例是大小调整元素。假设我们需要四种不同大小的用户头像，并且只能使用一个变量来控制其大小。

<img class="c-avatar lazy"  src="/static/imghw/default1.png"  data-src="user.jpg"   alt=""    style="max-width:90%" />
<img class="c-avatar lazy"  src="/static/imghw/default1.png"  data-src="user.jpg"   alt=""    style="max-width:90%" />
<img class="c-avatar lazy"  src="/static/imghw/default1.png"  data-src="user.jpg"   alt=""    style="max-width:90%" />
<img class="c-avatar lazy"  src="/static/imghw/default1.png"  data-src="user.jpg"   alt=""    style="max-width:90%" />

로그인 후 복사

.c-avatar {
  display: inline-block;
  width: calc(var(--size, 1) * 30px);
  height: calc(var(--size, 1) * 30px);
}

로그인 후 복사

用例十三：媒体查询

组合CSS变量和媒体查询对于调整整个网站中使用的变量非常有用。我能想到的最简单的示例是更改间距值。

:root {
  --gutter: 8px;
}

@media (min-width: 800px) {
  :root {
    --gutter: 16px;
  }
}

로그인 후 복사

使用--gutter变量的任何元素都将根据视口大小更改其间距，这是不是很棒吗？

用例十四：继承

是的，CSS变量确实继承。如果父元素中定义了CSS变量，那么子元素将继承相同的CSS变量。我们看下面的例子：

HTML

<div class="parent">
  <p class="child"></p>
</div>

로그인 후 복사

css

.parent {
  --size: 20px;
}

.child {
  font-size: var(--size);
}

로그인 후 복사

.child元素可以访问变量--size，因为它从父元素继承了它。很有趣,那它在实际的项目中有啥用呢？

1CSS 변수에 대해 알아야 할 사항! !

我们有一组以下需求的操作项

改变一个变量就可以改变所有项的大小
间距应该是动态的

HTML

<div class="actions">
  <div class="actions__item"></div>
  <div class="actions__item"></div>
  <div class="actions__item"></div>
</div>

로그인 후 복사

CSS

.actions {
  --size: 50px;
  display: flex;
  gap: calc(var(--size) / 5);
}

.actions--m {
  --size: 70px;
}

.actions__item {
  width: var(--size);
  height: var(--size);
}

로그인 후 복사

请注意，这里是如何将变量--size用于flexbox gap属性的。这意味着间距可以是动态的，并且取决于--size变量。

另一个有用的例子是使用CSS变量继承来定制CSS动画：

@keyframes breath {
  from {
    transform: scale(var(--scaleStart));
  }
  to {
    transform: scale(var(--scaleEnd));
  }
}

.walk {
  --scaleStart: 0.3;
  --scaleEnd: 1.7;
  animation: breath 2s alternate;
}

.run {
  --scaleStart: 0.8;
  --scaleEnd: 1.2;
  animation: breath 0.5s alternate;
}

로그인 후 복사

这样，我们就不需要定义@keyframes两次，它将继承.walk和.run元素的定制CSS 变量。

CSS 变量的工作方式

当var()函数中的CSS变量无效时，浏览器将根据所使用的属性用初始值或继承值替换。

:root {
  --main-color: 16px;
}

.section-title {
  color: var(--main-color);
}

로그인 후 복사

我使用16px是color属性的值。这是完全错误的。由于color属性是继承的，因此浏览器将执行以下操作：

该属性是否可继承？
- 如果是，父节点是否拥有该属性?
  - 是的，继承该值
  - 否:设置为初始值
- 否:设置为初始值

下面解释浏览器工作的流程图。

1CSS 변수에 대해 알아야 할 사항! !

网址值

我们可能无法控制网页中的所有资源，其中一些必须在线托管。在这种情况下，您可以将链接的URL值存储在CSS变量中。

:root {
  --main-bg: url("https://example.com/cool-image.jpg");
}

.section {
  background: var(--main-bg);
}

로그인 후 복사

但是，能想知道是否可以使用url()插入 CSS 变量。考虑以下

:root {
  --main-bg: "https://example.com/cool-image.jpg";
}

.section {
  background: url(var(--main-bg));
}

로그인 후 복사

由于var(--main-bg)被视为url本身，因此无效。当浏览器计算出该值时，该值将不再有效，并且将无法按预期运行。

存储多个值

CSS 变量也可以表示多个值，看下面的例子：

1CSS 변수에 대해 알아야 할 사항! !

:root {
  --main-color: 35, 90, 209;
}

.section-title {
  color: rgba(var(--main-color), 0.75);
}

로그인 후 복사

在示例中，我们有一个rgba()函数，并且RGB值存储在CSS变量中，以逗号分隔。如果我们想根据元素调整alpha值，这样做可以提供灵活性。唯一的缺点是无法使用DevTools颜色选择器来调整rgba值。

另一个例子是将它与background属性一起使用。

:root {
  --bg: linear-gradient(#000, #000) center/50px;
}

.section {
  background: var(--bg);
}

.section--unique {
  background: var(--bg) no-repeat;
}

로그인 후 복사

`@keyframes`规则中的动画变量

如果你阅读过CSS变量规范，则可能会读到“动画污染”一词。这个想法是，在@keyframes规则中使用CSS变量时，无法对其进行动画处理。

html

<div class="box"></div>

로그인 후 복사

CSS

.box {
  width: 50px;
  height: 50px;
  background: #222;
  --offset: 0;
  transform: translateX(var(--offset));
  animation: moveBox 1s infinite alternate;
}

@keyframes moveBox {
  0% {
    --offset: 0;
  }
  50% {
    --offset: 50px;
  }
  100% {
    --offset: 100px;
  }
}

로그인 후 복사

动画无法顺利进行。它将仅对值 (0, 50px, 100px)进行动画处理。根据CSS规范：

@keyframes规则中使用的任何自定义属性都会受到动画污染，这将影响通过动画属性中的var()函数引用它时如何处理它。

如果我们希望上述动画能够正常工作，则应采用老式的方法。这意味着，我们需要用要设置动画的实际CSS属性替换变量。

@keyframes moveBox {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(100px);
  }
}

로그인 후 복사

计算

你可能不知道可以使用 CSS 变量进行计算。考虑下面示例：

.c-avatar {
  display: inline-block;
  width: calc(var(--size, 1) * 30px);
  height: calc(var(--size, 1) * 30px);
}

로그인 후 복사

.c-avatar 大小会有不同的变化。我将默认值设置为1，所以默认大小为(30px * 30px)。注意不同的类变化以及更改--size值如何导致化身的大小变化。

.c-avatar--small {
  --size: 2;
}

.c-avatar--medium {
  --size: 3;
}

.c-avatar--large {
  --size: 4;
}

로그인 후 복사

Devtools和CSS变量

我们可以在浏览器DevTools中使用一些有用的技巧，这样就能更轻松地使用CSS变量。

看到颜色

使用CSS变量时，看到颜色或背景值的视觉指示器是否有用？ Chrome和Edge证明了这一点。

1CSS 변수에 대해 알아야 할 사항! !

计算值

要查看CSS变量的计算值，只要将鼠标悬停或单击即可。

1CSS 변수에 대해 알아야 할 사항! !

禁用CSS变量

当我们需要从使用CSS变量的所有元素中禁用CSS变量时，可以通过从定义它的元素中取消选中它来实现。参见下图：

1CSS 변수에 대해 알아야 할 사항! !

本文介绍了 CSS 变量的很多内容，希望能对你有些帮助，二创不易，还望点个赞+转发。

原文地址：https://ishadeed.com/article/css-vars-101/

作者： Ahmad Shadeed

译文地址：https://segmentfault.com/a/1190000039978246

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 CSS 변수에 대해 알아야 할 사항! !의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7552

Cakephp 튜토리얼

1382

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

GraphQL 캐싱 작업 Mar 19, 2025 am 09:36 AM

최근에 GraphQL 작업을 시작했거나 장단점을 검토 한 경우 "GraphQL이 캐싱을 지원하지 않음"또는

Redwood.js 및 동물 군을 사용하여 이더 리움 앱 구축 Mar 28, 2025 am 09:18 AM

최근 Bitcoin의 가격이 20k 달러가 넘는 USD가 최근에 등반되면서 최근 30k를 끊었으므로 Ethereum을 만드는 데 깊이 다이빙을 할 가치가 있다고 생각했습니다.

vue 3 Apr 02, 2025 pm 06:32 PM

그것은#039; VUE 팀에게 그것을 끝내는 것을 축하합니다. 나는 그것이 막대한 노력과 오랜 시간이라는 것을 알고 있습니다. 모든 새로운 문서도 있습니다.

Leakenty와 함께 자신의 Bragdoc을 만듭니다 Mar 18, 2025 am 11:23 AM

개발자로서 어느 단계에 있든, 우리가 완료 한 작업은 크든 작든, 개인적이고 전문적인 성장에 큰 영향을 미칩니다.

브라우저에서 유효한 CSS 속성 값을 얻을 수 있습니까? Apr 02, 2025 pm 06:17 PM

나는 누군가이 매우 합법적 인 질문으로 글을 썼습니다. Lea는 브라우저에서 유효한 CSS 속성 자체를 얻는 방법에 대해 블로그를 작성했습니다. 이는 이와 같습니다.

CI/CD에 약간 Apr 02, 2025 pm 06:21 PM

"웹 사이트"는 "모바일 앱"보다 더 잘 맞지만 Max Lynch 의이 프레임이 마음에 듭니다.

끈적 끈적한 포지셔닝 및 대시 Sass가있는 쌓인 카드 Apr 03, 2025 am 10:30 AM

다른 날, 나는 Corey Ginnivan의 웹 사이트에서 스크롤 할 때 카드 모음이 서로 쌓이는 것을 발견했습니다.

반응 형 디자인을위한 브라우저 비교 Apr 02, 2025 pm 06:25 PM

목표가 귀하의 사이트를 동시에 다른 크기로 표시하는 이러한 데스크탑 앱이 많이 있습니다. 예를 들어, 글을 쓸 수 있습니다

See all articles

CSS 변수에 대해 알아야 할 사항! !

소개

命名变量

作用域

回退方案

用例一：控制组件的大小

用例二：CSS 变量和 HSL 颜色

用例三：比例调整

用例四：CSS Grid

用例五：全值声明，CSS 渐变

用例六： Background Position

用例七： 在明暗模式之间切换

用例八： 设置默认值

用例九： 控制 wrapper 宽度

用例十一： 动态网格项目

用例十二： 用户头像

用例十三： 媒体查询

用例十四：继承

CSS 变量的工作方式

网址值

存储多个值

@keyframes规则中的动画变量

计算

Devtools和CSS变量

看到颜色

计算值

禁用CSS变量

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제

用例七：在明暗模式之间切换

用例八：设置默认值

用例九：控制 wrapper 宽度

用例十一：动态网格项目

用例十二：用户头像

用例十三：媒体查询

`@keyframes`规则中的动画变量