This article will take you to understand CSS variables, talk about how CSS variables work, and introduce how to use inline CSS variables to improve the efficiency of smart layout. I hope it will be helpful to everyone!

There are situations where I need a simple way to create a grid layout. For example, quickly draw a five-column grid without modifying the CSS every time I change my mind. In this article, we explore some use cases and think about how to implement and use them. [Recommended learning: css video tutorial]

How it works

Before exploring these concepts in depth, let’s first review the basic knowledge of CSS variables. It can also be called a "custom property".

All major browsers support CSS variables. The following is the support of each browser:

If you want to define CSS variables is a global variable, you need to add it to the :root declaration (:root is equivalent to ). If the variable is specific to a component, it can be defined in a declaration within the group.

In the example below, I define a global variable --size, which is used for the width and height of the square element.

:root?{
????--size:?50px;
}

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

What should we do if --size is not defined? CSS supports defining default variables or fallback variables when the passed variables are invalid.

var(--size, 10px) in the example below. If --size is invalid, the width and height values ??will be 10px.

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

In addition to this, you can also use CSS variables in inline CSS styles. For example

HTML

<div></div>

CSS

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

Next, we use the above concepts and demonstrate some examples.

Everyone said that there is no project to write on the resume, so I found a project for you, and also included a [construction tutorial].

CSS Grid Example

Sidebar and Main Content

In this design , I'm using CSS grid for the following:

• Sidebar and main menu

• Form items

• Three-column layout

#The width of the sidebar is fixed, and the main content changes. Let's say the width of the sidebar is 240px.

1. Sidebar and main menu

Html

<div>
????<aside></aside>
????<main></main>
</div>

Html

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

2. Form items

According to the design, each row has two columns, and the html structure is as follows:

Html

??<div></div>
??<div></div>
??<div></div>
??<div></div>

CSS

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

3. Three column layout

In the example below, I added --repeat-number: 3 and --gap: 8px as inline CSS. These variables will be added to the o-grid class and the settings of the grid will be based on these variables.

HTML

??<div></div>
??<div></div>
??<div></div>

CSS

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

I like to add default values ??to CSS variables in case the variable is not set . In the above code, I used var(--gap, 0), if the user does not provide the --gap variable, its default value will be 0 .

Dynamic Grid Items: minmax

For me this is a widely used use case and very important. I use Grid minmax a lot, but when I use it on multiple pages, I run into a problem.

Let’s take a basic example without using CSS variables.

In CSS I use minmax to define the minimum width for each grid item 250px .

CSS

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

Now, what should you do if your design requires grid items to be at least 300px wide? Do I need to create a version like the following?

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

Imagine having five different grids, each with different item widths, so the above is not the correct solution.

Using CSS variables, I can perform the following operations

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

In HTML, I can set CSS variables on tags:

?????<div></div>
?????<div></div>
?????<div></div>




?????<div></div>
?????<div></div>
?????<div></div>




?????<div></div>
?????<div></div>
?????<div></div>

Example source code: https: //codepen.io/shadeed/pen/xxxPYog/7d3e0d575a5cecb86233fc7d72fa90d4

Flexbox Example

In the example, there is an article title that contains the author name and tags. These layout methods on the page change dynamically, so a method to quickly switch these layout methods is needed.

HTML

<div>
????<h2>Article?title</h2>
????<div>
????????<p>By?Ahmad?Shadeed</p>
????????<p>Published?under:?CSS,?Design</p>
????</div>
</div>

CSS

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

有了它，我可以調整內聯(lián)樣式以將值更改為另一個關鍵字。 我發(fā)現(xiàn)這在進行快速原型制作甚至是制作網(wǎng)站時很有用。

按鈕

按鈕寬度

CSS 變量也適用于按鈕元素。 假設有一個帶有兩個input字段和一個按鈕的表單。

我的目的是通過使用內聯(lián)CSS變量來控制按鈕的寬度。 有時，按鈕應占據(jù)其父控件的100%寬度。

html

<button>Submit</button>

css

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

按鈕顏色

另一個有用的用途是當有重影按鈕（輪廓按鈕）時。 按鈕的顏色可以是任何顏色，通過使用CSS變量，可以輕松更改顏色。

HTML

<button>Save?Edits</button>
<button>Delete</button>

CSS

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

CSS 變量同樣適合懸停效果。懸停時，按鈕背景將變?yōu)榧兩?，并且字體顏色為白色。

事例源碼：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()函數(shù)，我可以傳遞一個--size 變量，它將乘以一個基本寬度值，在HTML中定義 --size變量：

<img  class="c-avatar lazy" src="/static/imghw/default1.png" data-src="user.jpg" alt="How do CSS variables work? How to use inline CSS variables for layout?" >
<img  class="c-avatar lazy" src="/static/imghw/default1.png" data-src="user.jpg" alt="How do CSS variables work? How to use inline CSS variables for layout?" >
<img  class="c-avatar lazy" src="/static/imghw/default1.png" data-src="user.jpg" alt="How do CSS variables work? How to use inline CSS variables for layout?" >
<img  class="c-avatar lazy" src="/static/imghw/default1.png" data-src="user.jpg" alt="How do CSS variables work? How to use inline CSS variables for layout?" >

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

作者：Ahmad shaded

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

（學習視頻分享：web前端）

The above is the detailed content of How do CSS variables work? How to use inline CSS variables for layout?. For more information, please follow other related articles on the PHP Chinese website!