CSS 변수는 어떻게 작동하나요? 레이아웃에 인라인 CSS 변수를 사용하는 방법은 무엇입니까?

在下面的例子中，我定义了一个全局变量--size，它用于square元素的宽度和高度。

:root { --size: 50px; } .square { width: var(--size); height: var(--size); }

如果--size没有定义，要怎么办呢?在传递的变量无效的情况下，CSS 支持定义默认变量或回退变量。

在下面的例子中的var(--size, 10px)。如果--size无效，则宽度和高度值将为10px。

.square { width: var(--size, 10px); height: var(--size, 10px); }

除此之外，还可以在内联CSS样式中使用CSS变量。例如

HTML

CSS

.elem { background: var(--background); }

接着， 我们以上述这些概念，还演示一些事例。

大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。

CSS网格示例

侧边栏和主内容

在此设计中，我将CSS网格用于以下各项：

• 边栏和主菜单

• 表单项

• 三列布局

侧边栏的宽度是固定的，主内容是变化。假设侧边栏的宽度是240px。

1.边栏和主菜单

Html

Html

.o-grid { display: grid; grid-template-columns: var(--columns); }

2. 表单项

按照设计，每行有两列，html 结构如下：

Html

CSS

.o-grid { display: grid; grid-template-columns: var(--columns); }

3. 三列布局

在下面的示例中，我添加了--repeat-number：3和--gap：8px作为内联CSS。 这些变量将添加到o-grid类，网格的设置将基于这些变量。

HTML

CSS

.o-grid { display: grid; grid-template-columns: repeat(var(--repeat-number), 1fr); grid-gap: var(--gap, 0); }

我喜欢在CSS变量中添加默认值，以防变量没有被设置。在上面的代码中，我使用了var(--gap, 0)，如果使用者没有提供--gap变量，则其默认值将为0。

动态网格项：minmax

对我来说，这是一个广泛使用的用例，并且非常重要。我经常使用Gridminmax，但是当我在多个页面上使用它时，我遇到了一个问题。

让我们举一个不使用 CSS 变量的基本示例。

在 CSS 中，我使用minmax为每个网格项目定义最小宽度250px。

CSS

.o-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr); grid-gap: 16px; }

现在，如果设计要求网格项目的宽度至少为300px

.o-grid--2 { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); }

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

HTML

로그인 후 복사

CSS

 
Article title
 
 
By Ahmad Shadeed
 
Published under: CSS, Design
 
 

사이드바 및 기본 콘텐츠

• 사이드바 및 메인 메뉴
• 양식 항목
• 3열 레이아웃

.article-header__meta { display: flex; justify-content: var(--justify); }

Submit

.c-button { /* Other styles */ width: var(--width, initial); }

Save Edits Delete

.c-button--ghost { /* Other styles */ background: transparent; color: var(--color, #000); border-color: currentColor; }

.c-avatar { display: inline-block; margin-right: 2rem; width: calc(var(--size, 1) * 30px); height: calc(var(--size, 1) * 30px); object-fit: cover; border-radius: 50%; box-shadow: 0 3px 10px 0 rgba(#000, 0.2); }

동적 그리드 항목:minmax

 
Article title
 
 
By Ahmad Shadeed
 
Published under: CSS, Design
 
 

CSS

.article-header__meta { display: flex; justify-content: var(--justify); }

有了它，我可以调整内联样式以将值更改为另一个关键字。 我发现这在进行快速原型制作甚至是制作网站时很有用。

按钮

按钮宽度

CSS 变量也适用于按钮元素。 假设有一个带有两个input字段和一个按钮的表单。

我的目的是通过使用内联CSS变量来控制按钮的宽度。 有时，按钮应占据其父控件的100%宽度。

html

Submit

css

.c-button { /* Other styles */ width: var(--width, initial); }

按钮颜色

另一个有用的用途是当有重影按钮（轮廓按钮）时。 按钮的颜色可以是任何颜色，通过使用CSS变量，可以轻松更改颜色。

HTML

Save Edits Delete

CSS

.c-button--ghost { /* Other styles */ background: transparent; color: var(--color, #000); border-color: currentColor; }

CSS 变量同样适合悬停效果。悬停时，按钮背景将变为纯色，并且字体颜色为白色。

事例源码：https://codepen.io/shadeed/pen/NWWXqqX/f8e6969d5145d4dcd81aacf7a037c995

用户头像

每个角色的大小都不同，这非常适合用 CSS 变量来解决。假设有四个不同大小的用户头像。

在CSS中，定义了以下样式：

.c-avatar { display: inline-block; margin-right: 2rem; width: calc(var(--size, 1) * 30px); height: calc(var(--size, 1) * 30px); object-fit: cover; border-radius: 50%; box-shadow: 0 3px 10px 0 rgba(#000, 0.2); }

通过使用Calc()函数，我可以传递一个--size变量，它将乘以一个基本宽度值，在HTML中定义--size变量：

事例源码：https://codepen.io/shadeed/pen/WNNdErw/cdaac5ff667e1f7d9c8241655441f10d

作者：Ahmad shaded

原文：https://css-tricks.com/patterns-for-practical-css-custom-properties-use/

（学习视频分享：web前端）

위 내용은 CSS 변수는 어떻게 작동하나요? 레이아웃에 인라인 CSS 변수를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!