CSS 中的 var() 函数用法与根选择器

joshua king

已于 2023-05-07 20:30:22 修改

阅读量7.2k

点赞数 7

分类专栏： CSS函数 CSS变量 CSS 文章标签： css html

于 2022-10-07 18:06:42 首次发布

本文链接：https://blog.youkuaiyun.com/m0_66939000/article/details/127196711

版权

CSS 同时被 3 个专栏收录

3 篇文章

订阅专栏

CSS函数

1 篇文章

订阅专栏

CSS变量

1 篇文章

订阅专栏

该函数用于插入 CSS 变量的值。var()

该函数的语法如下：var()

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) 可选的。回退值（如果没有找到变量则使用）

注意：变量名称必须以两个短划线（--）开头，并且区分大小写！

var（）如何工作

首先：CSS变量可以具有全局或局部作用域。

局部变量：

CSS:

        div {
            float: left;
            width: 200px;
            height: 200px;
            background-color: var(--a);
        }

        <div style="--a:red">1</div>
        <div style="--a:pink">2</div>
        <div style="--a:blue">3</div>
        <div style="--a:green">4</div>
        <div style="--a:yellow">5</div>

注意：它只能在 div 标签里使用

全局变量：

可以在整个文档中访问/使用，而局部变量只能在声明它的选择器内使用。

CSS ：根选择器

:root 里面定义变量，就是全局变量，它跟less sass 定义跟使用方法异曲同工

该函数与less、sass的语法如下：

// root
:root {
  --blue: #1e90ff;
  --width: 200px;
  --border: #ccc;
}
div {
  border: 1px solid var(--border);
}

// less
@border: #ccc;
div {
  border: 1px solid @border;
}

// sass
$border: #ccc;
div {
  border: 1px solid $border;
}

若要创建具有全局作用域的变量，请在选择器中声明它。选择器与文档的根元素匹配。:root``:root

若要创建具有局部作用域的变量，请在要使用它的选择器中声明该变量。

下面的示例与上面的示例相同，但此处我们使用函数。var()

首先，我们声明两个全局变量（--blue 和 --white）。然后，我们使用该函数稍后在样式表中插入变量的值：var()

<!DOCTYPE html>
<html>

<head>
    <style>
        :root {
            --blue: #1e90ff;
            --white: #ffffff;
            --pink: #FFa9c6;
            --PinkPurple: #f434e2;
        }

        body {
            background-color: var(--blue);
        }

        h2 {
            border-bottom: 2px solid var(--blue);
        }

        .container {
            color: var(--blue);
            background-color: var(--white);
            padding: 15px;
        }

        button {
            background-color: var(--white);
            color: var(--blue);
            border: 1px solid var(--blue);
            padding: 5px;
        }

        .box {
            float: left;
            width: 150px;
            height: 150px;
            background: linear-gradient(to right, var(--a), var(--b));
        }
    </style>
</head>

<body>

    <h1>Using the var() Function</h1>

    <div class="container">
        <h2>Lorem Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar
            felis blandit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar
            felis blandit.</p>
        <p>
            <button>Yes</button>
            <button>No</button>
        </p>
    </div>

    <div class="box" style="--a:#a955FF;--b:#ea51FF">1</div>
    <div class="box" style="--a:#56CCF2;--b:#2F80ED">2</div>
    <div class="box" style="--a:#FF9966;--b:#FF5E62">3</div>
    <div class="box" style="--a:#80FF72;--b:#7EE8FA">4</div>
    <div class="box" style="--a:var(--pink);--b:var(--PinkPurple)">5</div>
</body>

</html>