关于前端:CSS-CSS变量定义和使用

40次阅读

共计 556 个字符,预计需要花费 2 分钟才能阅读完成。

简单的网站都会有大量的 CSS 代码,通常也会有许多反复的值。举个例子,同样一个色彩值可能在成千上百个中央被应用到,如果这个值产生了变动,须要全局搜寻并且一个一个替换(很麻烦)。自定义属性在某个中央 (通常是全局) 存储一个值,而后在其余许多中央援用它,这样能够实现一个批改,全局变更。
另一个益处是语义化的标识(如 –main-text-color 会比 #00ff00 更易了解)。

CSS 变量(又称自定义属性)是由工程开发者定义的,能够重复使用的 CSS 属性值。CSS 变量多在全局定义。

CSS 变量的申明(定义 CSS 变量),要求属性名须要以两个减号开始(如 –success-color),属性值则能够是任何无效的 CSS 值。
body {
–success-color: green;
–main-bg-color: brown;
}

CSS 变量的应用,要求用 var() 函数加 ”CSS 变量属性名 ” 来取值。
element {
background-color: var(–main-bg-color);
}

留神:
自定义属性名是大小写敏感的,–my-color 和 –My-color 会被认为是两个不同的自定义属性。

完结。

同步更新到本人的语雀
https://www.yuque.com/dirackeeko/blog/nbsemh9k6rwpgfgn

正文完
 0