CSS 变量与复杂样式

CSS 变量定义与使用

代码语言：javascript复制

  :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 继承和应用，例如变量的使用。

希望这份总结能帮助您清晰了解这段代码所涵盖的重要知识点。

变量 函数 继承 css size

0 人点赞