css常量自定义

CSS常量自定义是CSS3新特性之一。通过自定义常量，可以在CSS样式表中定义一些常用颜色值、字体大小、边距等，方便代码编写。

    :root {
        --primary-color: #007bff;
        --secondary-color: #6c757d;
        --font-size: 16px;
        --margin: 10px;
    }

    p {
        color: var(--primary-color);
        font-size: var(--font-size);
        margin: var(--margin);
    }

在 :root 中定义自定义常量，可以在整个样式表中使用。使用时需要在变量名称前加上 var() 函数并传入相应的值。这样可以使代码更加简洁和易于维护。

使用自定义常量可以使代码具有更高的可重用性和灵活性，可以根据不同需求修改常量值，而无需修改每处使用该值的代码。

    :root {
        --primary-color: #007bff;
    }

    .button {
        background-color: var(--primary-color);
    }

    .link {
        color: var(--primary-color);
    }

在上述例子中，只需更改 :root 中的 --primary-color 值，就可以同时修改按钮和链接中的颜色值，避免了大量重复的代码。

总之，CSS常量自定义是一种很实用的技术，可以提高代码编写的效率和可维护性。