css变量系列（1）：变量的基本使用

- - 和 var 和 :root

• --
  使用 -- 前缀声明的属性被称之为CSS的自定义属性
• var()
  通过var()函数引用的自定义属性又被称之为CSS的变量！
• :root
  这是伪类选择器，代表根元素 html

一般我们会定义一些全局变量，如主题颜色

:root {
	--themeColor: red;
}
html {
	background-color: var(--themeColor);
	// 找不到 --themeColor 的话就用 blue
	color: var(--themeColor, blue)
}

css为什么不用其他符号声明变量而用–？
Sass中使用$符，在LESS中使用@符，Stylus声明变量直接使用表达式，css只能另选了

js 来获取和改变自定义属性

• .getPropertyValue(propertyName)
  获取自定义属性的值
• .setProperty(propertyName, value, priority)
  重置自定义属性的值
• .removeProperty(propertyName)
  删除自定义属性

:root{
     --bg-color: blue;
}

// 获取
getComputedStyle(document.documentElement).getPropertyValue('--bg-color')  // blue
        
// 赋值
document.documentElement.style.setProperty('--bg-color', 'yellow')

常见问题

问题1：变量转换出空格

:root{
    --fong-size: 30;
}
div{
    font-size: var(--fong-size)px;
}

此时结果并不是 30px，因为变量转换的时候末尾会带上空格，var(–fong-size)px 会转换成30 px
解决：

// 声明变量时带上px
--fong-size: 30px;

// 使用calc()计算属性
font-size: calc(var(--fong-size) * 1px);