css变量的使用
css变量的使用
1.介绍:我们也可以在css中定义变量,和less、sass一样,通过–来定义变量
div { /* 开始定义变量 */ --color: red; /* 通过var()函数来使用变量,第二个参数指定默认值 */ color: var(--color, green) } /* 也可以将变量定义到跟部中,这样所有的选择器都可以使用 */ :root { --color: red; --foo: 20px; } div { color: var(--color) font-size: var(--foo) } p { color: var(--color) font-size: var(--foo) } /* 使用乘除加减计算px,此时必须使用calc()函数 */ div { --foo: 20; font-size: calc(var(--foo) * 6px); } /* 定义响应式的变量 */ @media screen and (max-width: 768px) { body { --backColor: red; } } body { background: var(--backColor); } /* @supports是CSS3新引入的规则之一,主要用于检测当前浏览器是否支持某个CSS属性并加载具体样式. */ @supports (display: flex) { .div { color: red; } }