这些以双连字符开头的 CSS 属性是什么？ [复制]答案

【问题标题】：What are these CSS properties that start with a double-hyphen? [duplicate]这些以双连字符开头的 CSS 属性是什么？ [复制]
【发布时间】：2018-03-17 18:25:36
【问题描述】：

我最近看到了网站StuffAndNonsense.co.uk，这是数字设计师安迪·克拉克的个人网站。我对它使用了我什至不知道存在的网页技术感到惊讶。

我查看了样式并发现了这一点：

:root {
    --font-family: tondo_rg,sans-serif;
    --font-family-light: tondo_lt,sans-serif;
    --font-family-bold: tondo_bd,sans-serif;
    --font-weight: 400;
    --font-size-xxx-display: 8vmin;
    --font-size-xx-display: 4.11rem;
    --font-size-x-display: 3.653rem;
    --font-size-display: 3.247rem;
    --font-size-xxxx-large: 2.887rem;
    --font-size-xxx-large: 2.027rem;
    --font-size-xx-large: 1.802rem;
    --font-size-x-large: 1.602rem;
    --font-size-large: 1.424rem;
    --font-size-medium: 1.266rem;
    --font-size: 1.125rem;
    --font-size-small: 1rem;
    --font-size-x-small: .889rem;
    --font-size-xx-small: .79rem;
    --lineheight-text: 1.5;
    --lineheight-heading: 1.3;
    --color-background: #fff;
    --color-background-selection: #f0f2f3;
    --color-border: #cacfd5;
    --color-text-default: #0b1016;
    --color-text-alt: #95a0ac;
    --color-base: #f4f5f6;
    --color-accent: #ba0d37;
    --color-logo-enamel: #ba0d37;
    --color-logo-highlight: #fdfdfd;
    --color-logo-metal: #cacfd5;
    --color-logo-lettering: #fff;
    --color-logo-type: #0b1016;
    --color-text-link: #2c4159;
    --color-text-link-active: var(--color-text-link);
    --color-text-link-focus: var(--color-text-link);
    --color-text-link-hover: var(--color-accent);
    --color-text-link-visited: var(--color-text-link);
    --color-button-default: #2c4159;
    --color-button-alt: #243449;
    --color-button-border: #8586a4;
    --color-button-shadow: #ecedee;
    --border-radius-x-small: .25rem;
    --border-radius-small: .5rem;
    --border-radius-medium: .75rem;
    --border-radius-large: 1rem;
    --border-radius-circle: 50%;
    --border-width-hairline: .5px;
    --border-width-thin: 1px;
    --border-width-thick: 2px;
    --grid-gap: 4vw;
    --max-width: 92rem;
    --spacing-xx-small: .125rem;
    --spacing-x-small: .25rem;
    --spacing-small: .5rem;
    --spacing: .75rem;
    --spacing-medium: 1rem;
    --spacing-large: 1.5rem;
    --spacing-x-large: 2rem;
    --spacing-xx-large: 3rem;
    --duration-instantly: 0;
    --duration-immediately: .1s;
    --duration-quickly: .2s;
    --duration-promptly: .5s;
    --duration-slowly: 1s;
}

我……至少可以说是一头雾水。我不仅从未见过以-- 为前缀的CSS 属性，而且我从未见过像font-size-xx-large: 1.802rem; 这样的东西。这是在做什么？我尝试了Googling（甚至Binging）但无济于事。

【问题讨论】：

标签： css

【解决方案1】：

这些属性是 CSS 变量。您可以在此处查看有关 CSS 变量的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables 这是如何访问 CSS 变量的示例：

element {
background-color: var(--main-bg-color);
}

它们位于 root 的原因：:root 选择器允许您定位 DOM 或文档树中最高级别的“父”元素。

【讨论】：

【解决方案2】：

CSS 中的变量以“--”开头，区分大小写 :root 用于定义全局范围，类似于定义主体选择器

:root {
  --font-size-xx-large: 16px;
  --font-size-xx-small: 12px;
}

为了引用该变量，我们需要使用 var() 函数

    p {
      font-size: var(--font-size-xx-large);
    }

   div{
      font-size: var(--font-size-xx-small);
    }

注意：目前并非所有浏览器都支持

在此处查看兼容性详细信息 - https://caniuse.com/#feat=css-variables

代码示例供参考 - https://codepen.io/nagasai/pen/aYmPYv

:root {
  --font-size-xx-large: 16px;
  --font-size-xx-small: 12px;
}

p {
      font-size: var(--font-size-xx-large);
    }

div{
      font-size: var(--font-size-xx-small);
    }

<p>Paragraph font size large 16px</p>

<div>Div font size small 12px</div>

【讨论】：