跳转到帖子
在手机APP中查看

一个更好的浏览方法。了解更多。
OKCCN - XenForo & IPS Plugin Marketplace

主屏幕上的全屏APP，带有推送通知、徽章等。

在iOS和iPadOS上安装此APP
  1. 在Safari中轻敲分享图标
  2. 滚动菜单并轻敲添加到主屏幕。
  3. 轻敲右上角的添加按钮。
在安卓上安装此APP
  1. 轻敲浏览器右上角的三个点菜单 (⋮) 。
  2. 轻敲添加到主屏幕或安装APP。
  3. 轻敲安装进行确认。
  • 选择语言

CSS Variables - var() Function

Cavalry
在 教程

推荐的帖子

  • 行政经理

CSS Variables - var() Function

CSS Variables

The var() function is used to insert the value of a CSS variable.

CSS variables have access to the DOM, which means that you can create variables with local or global scope, change the variables with JavaScript, and change the variables based on media queries.

A good way to use CSS variables is when it comes to the colors of your design. Instead of copy and paste the same colors over and over again, you can place them in variables.

CSS Declare a Variable

CSS variables can have a global or local scope.

Global variables can be accessed through the entire document, while local variables can be used only inside the selector where it is declared.

To create a global variable, declare it inside the :root selector. The :root selector matches the document's root element.

To create a local variable, declare it inside the selector that is going to use it.

A CSS variable name must begin with two dashes (--) and is case sensitive!

Syntax

:root {
  --primary-bg-color: green; /* global scope */
}

.note {
  --note-bg: yellow; /* local scope */
}

The CSS var() Function

The var() function is used to insert the value of a declared CSS variable.

Syntax

var(--name, value)
Value Description
name Required. The variable name (must start with two dashes)
value Optional. The fallback value (used if the variable is not found)

Advantages of using var() are:

  • Makes the code easier to maintain (simplifies updates)
  • Makes the code easier to read (more understandable)
  • Makes it easier to change the color values for the entire page

CSS Variables Example

Here, we declare two global variables (--primary-bg-color and --primary-color).

Then, we use the var() function to insert the value of the variables later in the style sheet:

Example

:root {
  --primary-bg-color: #1e90ff;
  --primary-color: #ffffff;
}

body {
  background-color: var(--primary-bg-color);
}

.container {
  color: var(--primary-bg-color);
  background-color: var(--primary-color);
  padding: 15px;
}

.container h2 {
  border-bottom: 2px solid var(--primary-bg-color);
}

.container .note {
  border: 1px solid var(--primary-bg-color);
  padding: 10px;
}
Try it Yourself »

To change the look of the page, you just need to change the two variable values:

Example

:root {
  --primary-bg-color: #8FBC8F;
  --primary-color: #FFFAF0;
}

body {
  background-color: var(--primary-bg-color);
}

.container {
  color: var(--primary-bg-color);
  background-color: var(--primary-color);
  padding: 15px;
}

.container h2 {
  border-bottom: 2px solid var(--primary-bg-color);
}

.container .note {
  border: 1px solid var(--primary-bg-color);
  padding: 10px;
}
Try it Yourself »

CSS var() Function

Function Description
var() Inserts the value of a CSS variable

  • 引用

    • 参与讨论

    你可立刻发布并稍后注册。 如果你有帐户，立刻登录发布帖子。

    游客
    回帖…
    转到主题列表

    帐户

    导航

    搜索

    搜索

    配置浏览器推送通知
    Chrome (安卓)
    1. 轻敲地址栏旁的锁形图标。
    2. 轻敲权限 → 通知。
    3. 调整你的偏好。
    Chrome (台式电脑)
    1. 点击地址栏中的挂锁图标。
    2. 选择网站设置。
    3. 找到通知选项并调整你的偏好。