使用 variáveis CSS como uma pessoa sênior com essas 5 dicas 🔥

2025-06-11

使用 variáveis CSS como uma pessoa sênior com essas 5 dicas 🔥

苏马里奥

101🔗​

无需 CSS 即可重复，但可以使用字体、核心和espaçamentos。重复永远是必要的，这是一种与我们的设计保持一致的温柔，重复更喜欢一种通常的感觉。没有 caso abaixo，temos um Timing de transição padrão pras animações dos 组件：

.btn {
  transition: background 200ms ease-in;
}

.link {
  transition: color 200ms ease-in;
}
Enter fullscreen mode Exit fullscreen mode

 

为了保证访问权限，可以通过用户代理配置来控制动画或敏感算法，但不可以这样操作：

.btn {
  transition: background 200ms ease-in;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: background linear;
  }
}
Enter fullscreen mode Exit fullscreen mode

 

在此情况下，您可以使用该类计时工具来计时@media。您是否可以这样做？ Teríamos que colocar todas as Class com cores dentro da @media (prefers-color-scheme: dark)？

不同的 CSS 代码可能会带来不同！
首先要注意的是时间配置和缓和“全球”本地化问题。 Geralmente usamos :root {}que é um equale à html {}, mas que possuí ainda mais precedência.

:root {
  --timing: 200ms ease-in;
}
Enter fullscreen mode Exit fullscreen mode

 

所有这些都可以作为参考，但没有任何功能可以使用var()

.btn {
  transition: background var(--timing);
}

.link {
  transition: color var(--timing);
}
Enter fullscreen mode Exit fullscreen mode

 

因此，如果您有一个有利的条件，那么就需要有必要的勇气和勇气，因此，您可以在以下联赛中使用：

:root {
  --timing: 200ms ease-in;
  @media (prefers-reduced-motion: reduce) {
    --timing: linear;
  }
}
Enter fullscreen mode Exit fullscreen mode

您可以查看媒体条件 ，并根据不同的情况(prefers-reduced-motion: reduce)重新声明，然后再进行声明。你知道 CSS 的经济性是怎样的吗？它是如何实现逻辑的？true--timing: linear--timing: 200ms ease-in;

设计代币

设计令牌是应用程序组件的组成部分。示例是特定字体的示例，核心是专有的，并且是国家政策的一部分，核心的边界是核心的边界，边界的边界是边界的边界，代表了边界padding的gap边界图标。所有的配置都与外部组件、预设置和变量 - 令牌的保护保持一致。

 

代币的使用示例是一系列应用程序的核心部分。使用 CSS 来定义适当的名称，并以复制、修改和操作的方式进行修改，可以在不同的条件下轻松更改，以便实现所需的主题。

我们可以使用 CSS OpenProps 的变量框架和 CSS 的变量以及媒体功能来实现 escuro 的示例。

主题 101 下的 Open Props 文档

 

没有示例可以选择:rootuma 媒体查询 com 的colocado 或选择器prefers-color-scheme: dark。 Com isso，se a媒体条件true，或竞争作为:root变量com o 主题escuro irá sobrescrever o 前面的竞争或主题claro padrão。

Podemos criar múltiplos emusando 或 mesmo sistema 的多个主题：


.button {
  color: var(--btn-text, #1A1A1A);
  background: var(--btn-bg, #FAFAFA);
}

.button[danger] {
  --btn-text: #FAFAFA;
  --btn-bg: #FF0000;
}
Enter fullscreen mode Exit fullscreen mode

 

无 HTML：

<div>
  <button class="button">Tema claro</button>
  <button class="button" danger>Tema vermelho</button>
</div>
Enter fullscreen mode Exit fullscreen mode

 

Mas e se eu quisesse alterar um tema？ Pra um elemento como um Alert ou callout seria interessante adicionar um pouco de opacidade à cor de fato, mas só isso。 Como você faria？

TailwindCSS解决了可变的组合问题。

各种组合🔗

Adam Wathan 的《用 CSS 变量组合不可组合》是由TailwindCSS 的作者提出的，目的是为了解决这个问题。

TailwindCSS 是 PostCSS 的插件，可作为设计系统的一部分按需使用。 Possuindo um DS, ele também possui os tokens que eu estava falando no tópico front:

打印 Tailwind com 图像令牌网站

 

可以使用蓝色的文本类，以最快的速度.text-blue-300，使用.text-opacity-5050% 的文本类。

Watham 提供了一个解决方案，该解决方案可提供有关操作的核心功能，包括各种 CSS 和勇气。 Dessa forma，se .text-opacity-tivesse no mesmo escopo que uma classe de cor，ela“injetaria” a variável que ela contém na classe。

阿拜索 (Abaixo) 是一个“注射”类药物的实例，也是一种使用--text-opacityum elemento junto 的勇气：

.text-blue-300 {
  --text-opacity: 1;
  color: rgba(144, 205, 244, var(--text-opacity));
}

.text-opacity-50 {
  --text-opacity: 0.5;
}
Enter fullscreen mode Exit fullscreen mode

 

类应用程序是作为变量 CSS 的其他属性而影响 umas 的应用程序类：

影响不同环境的不同类别的变化的视觉示例

 

那么，是否有可能对不同的组件进行不同的修改？

É。 Bootstrap 5 fez isso com maestria。

块闭合🔗

Bootstrap 的组件有 9 个变体，发送链接，有什么用吗？

将文档打印为 Bootstrap 字体的 9 种变体

 

是的bootstrap/dist/css/bootstrap.css。 Algumas propriedades foram omitidas por brevidade:

.btn {
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-font-family: ;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 1.5;
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-width: var(--bs-border-width);
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: var(--bs-border-radius);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
  --bs-btn-disabled-opacity: 0.65;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);

  display: inline-block;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-family: var(--bs-btn-font-family);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  color: var(--bs-btn-color);
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  background-color: var(--bs-btn-bg)
}
Enter fullscreen mode Exit fullscreen mode

 

没有código acima，感知到：

  • São definidos valores padrão dentro do escopo do Componente，包括变量之外的参考值，可以通过不同的命名法重复标记，并可以参考 cruzada。

  • 定义为使用代币的属性。

Agora vamos 是一个变体组合.btn-primary：

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #0d6efd;
  --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0b5ed7;
  --bs-btn-hover-border-color: #0a58ca;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0a58ca;
  --bs-btn-active-border-color: #0a53be;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
}
Enter fullscreen mode Exit fullscreen mode

 

因此 CSS 有所不同。

特殊说明了改变附加值或重新声明属性的变体，以极端形式 (DRY)。

集市上的布局如何？

10 张牌排列在双排竞争中 5 张牌卡达。卡达卡 tem uma cor distinta。

 

Usando essa mesma estratégia, criamos uma classe .cardem que background-colorrecebe uma variável e pra cada nth-child(n)a gente muda a cor da variável:

.card {
  height: var(--size); width: var(--size);
  background-color: var(--color, gray);
  border-radius: 8px;
}

.card:nth-child(1) { --color: maroon; }
.card:nth-child(2) { --color: red; }
.card:nth-child(3) { --color: purple; }
.card:nth-child(4) { --color: fuchsia; }
.card:nth-child(5) { --color: green; }
.card:nth-child(6) { --color: lime; }
.card:nth-child(7) { --color: yellow; }
.card:nth-child(8) { --color: navy; }
.card:nth-child(9) { --color: blue; }
.card:nth-child(10) { --color: aqua; }
Enter fullscreen mode Exit fullscreen mode

 

大量使用 20 张卡、30 张卡？ O CSS 怎么样？ Se pelo menos tivesse como a gente passar as cores pelo elemento, como as props no React.

😈 e se eu te disser que tem como？

多种道具🔗

与其他策略不同的是，营销是很有趣的。 Mantemos o codigo da variável .card, mas mudamos como inserimos o valor da cor:


<li class="card" style="--color: tomato"></li>
Enter fullscreen mode Exit fullscreen mode

 

CSS 内联。 Podem rir de mim，fãs de Tailwind。

 

O conceito "parece" ruim, mas não é。首先，CSS 声明中的不同之处（属性和价值）、CSS 本地属性、非 CSS 元素或附加属性都没有。在此，我们将介绍 CSS 样式的集成，以及内联声明的具体说明。

JSX 或 Afins 模板语言的开头，从字面意义上讲，是逻辑语义的改变，其他一些内容，是 CSS-in-JS 解决方案的必要条件：

这两者之间存在差异......

<Contact color="darkgreen" />
Enter fullscreen mode Exit fullscreen mode

 

Pra isso...

<div class="contact" style="--color: darkgreen">
  <!-- ... -->
</div>
Enter fullscreen mode Exit fullscreen mode

 

至少这是……？

<div class="contact" style={{ '--color': contact.color }}>
  <!-- ... -->
</div>
Enter fullscreen mode Exit fullscreen mode

 

离题 → 可能使用 HTML da mesma forma que usamos props em Styled Components

 

问题是什么？

<button variant="primary" dark>Follow for more!</button>
Enter fullscreen mode Exit fullscreen mode

 

我在这里吗？

button[variant=primary] {
   background-color: var(--background, red);
   color: var(--background, black);

   &[dark] {
      --background: darkred;
      --color: white;
   }
}
Enter fullscreen mode Exit fullscreen mode
  • 请勿使用符合 W3C 标准的精确方式
  • '&' 是 CSS 有效吗？

 

Vamos supor que ao invés de um botão completamente limpo quiséssemos que a classe base .btncomeçasse com estilos padrão.因此，您可以使用第二个功能参数var()，以作为后备方案，而不是最初声明的变量。

O Problema dessa abordagem é que emvariates and outros estados precisamos semper preencher com um valor padrão caso --backgroundou --colornunca sejam declarados:

.btn {
   background: var(--background, #FAFAFA);
   color: var(--color, #1A1A1A);
}

.btn:focus {
  outline: 1px solid var(--background, #FAFAFA);
}
Enter fullscreen mode Exit fullscreen mode

 

是否存在美好的事物？ W3C 成员和 CSS 工作组Lea Verou veio com uma abordagem muito boa sobre。

私人变量🔗

解决CSS系列变量后备参数重新声明问题的替代方案：

1 - 声明后备组件不包含任何内容

.btn {
   --background: #FAFAFA;
   --color: #1A1A1A;
   background: var(--background);
   color: var(--color);
}

.btn:focus {
   --background: #FAFAFA;
  outline: 1px solid var(--background);
}
Enter fullscreen mode Exit fullscreen mode

功能性的，但它阻碍了一些元素的组成部分--color，一些特定的特征，或者是多种复杂选择的常见困难。

 

2 -使用默认参数或参数进行后备操作的问题var()

.btn {
   --background-initial: #FAFAFA;
   --color-initial: #1A1A1A;
   background: var(--background, var(--background-initial));
   color: var(--color, var(--color-initial));
}

.btn:focus {
   --background-initial: #FAFAFA;
  outline: 1px solid var(--background, var(--background-initial));
}
Enter fullscreen mode Exit fullscreen mode

Nessa 实施了一系列的属性--background和--color元素，并提供了高级的具体信息，请详细说明？

Lea Verou 拥有伪私人定制属性的概念，其功能类似于程序语言中的各种隐私（视频或 sublinhado --_nome.

Nesse conceito criamos uma variável defallback como anteriormente, mas different dessa ela terá o prio valor padrão:

.btn {
   --_background: var(--background, #FAFAFA);
   --_color: var(--color, #1A1A1A);
   background: var(--background);
   color: var(--color);
}

.btn:focus {
  outline: 1px solid var(--_background);
}
Enter fullscreen mode Exit fullscreen mode

如下所示：

  1. Herdar 作为 propriedades --backgrounde --color。
  2. 定义 um 后备 pra cada propriedade。
  3. Fazê-lo de forma muito menos verbosa。

 

 

目前，我已经制定了策略和策略，并开发了 CSS 来增强我的体验和批判性，允许在危机中设计复杂的布局，从而实现认知功能和扩展性和定制化。

嗯，例如，essponsivo com apenas 43 linhas de CSS 布局：

 

不知道便当布局吗？ Tá na mao。

利克塞莱托

Bento Grid 布局响应式 CSS 40 行🥢 🍱

Camilo Micheletto ・ 2023年11月17日

#css #教程 #webdev #codenewbie

学习资料🔗

鏂囩珷鏉ユ簮锛�https://dev.to/lixeletto/use-variaveis-css-como-uma-pessoa-senior-com-essas-5-dicas-2g52
Devto 翻译
PREV
如何使用 JavaScript 创建 NFT
NEXT
统一 CSS 和使用方法