CSS 变量与复杂样式

友儿

发布于 2024-08-09 12:48:59

1590

文章被收录于专栏：友儿友儿

CSS 变量定义与使用

  :root {
        --size: 300px;
    }

    .container {
        --gap: calc(var(--size) * 0.1);
        --gap1: calc(var(--size) * 0.5);
        width: var(--size);
        height: var(--size);
        background: #faebcc;
        padding: var(--gap);
        margin: var(--gap);
    }

    .container .item {
        width: var(--gap1);
        height: var(--gap1);
        background: #2e6da4;
    }

CSS 变量：
- 在 :root 中定义了变量 --size ，并在后续的样式规则中多次使用，如 .container 和 .container.item 中。
计算属性：
- 在 .container 中，使用 calc() 函数根据 --size 计算出 --gap 的值。
- 在 .container.item 中，使用 calc() 函数根据 --size 计算出 --gap1 的值。
样式继承与应用：
- .container 定义的样式会被其内部的 .item 继承和应用，例如变量的使用。