CSS 中的变量
2024-09-28
16
1. 前言2. 声明变量3. var() 函数4. 变量的作用域
1. 前言
在 CSS 中,有很多需要反复使用的属性值,如果每个使用的地方都直接写死这个值,而没有使用变量去定义这个值的话,后期修改起来会很麻烦。有很多人忽略了在 CSS 中也可以定义变量这个事情,相信你会爱上它 !
CSS 使用变量有很多好处: 可以减少样式代码的重复性,增加样式代码的扩展性和灵活性
2. 声明变量
声明变量的时候,变量名前面要加两根连词线 --
:root {
--color: #ff5722;
--size: 25px;
--shadow: 2px 2px 5px 1px rgba(143, 143, 143, .1)
}
上面代码中,声明了三个变量: --color
、--size
、--shadow
变量名大小写敏感,例如: --header
和 --Header
是两个不同的变量
它们与 color
, font-size
等正式属性没有什么不同,只是没有默认含义,所以 CSS 变量又叫做 CSS 自定义属性
你可能会问,为什么选择两根连词线(--
)表示变量?因为 $foo
被 Sass 用掉了,@foo
被 Less 用掉了。为了不产生冲突,官方的 CSS 变量就改用两根连词线了。
3. var() 函数
var()
函数用于读取变量
div {
font-size: var(--size);
box-shadow: var(--shadow);
}
var()
函数还可以使用第二个参数,表示变量的默认值。如果变量不存在,就会使用这个默认值
font-size: var(--size, 30px);
var()
函数还可以用在变量的声明
--big-size: var(--size);
变量值只能作为属性名,不能作为属性值。下面代码中,变量 --side
用作属性名,这是无效的。
.foo {
--side: margin-top;
/* 无效 */
var(--side): 20px;
}
4. 变量的作用域
同一个 CSS 变量,可以在多个选择器内声明。读取的时候,优先级最高的声明生效,这与 CSS 的层叠规则是一致的
下面代码中,三段文字的颜色是不一样的
<style>
:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }
</style>
<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>
变量的作用域就是它所在选择器的有效范围内
由于这个原因,全局的变量通常放在根元素 :root
里面,确保任何选择器都可以读取它们
更新于:16天前:root {
--color: #ff5722;
--size: 25px;
--shadow: 2px 2px 5px 1px rgba(143, 143, 143, .1)
}
赞一波!
相关文章
- 【说站】python变量如何拼接
- 使用 HTML、CSS 和 JavaScript 的实时计算器
- CSS overflow 内容溢出时的显示方式
- CSS font-family 属性设置字体
- CSS 控制内容显示行数
- 玩转 CSS Flexbox 弹性布局
- CSS实现文字环绕图片和文字两端对齐
- CSS 边框属性总结
- PHP中的 unset 和 引用变量
- position:sticky纯css实现粘性定位让元素滚到顶部固定
- css linear-gradient实现背景渐变色
- css页面内容不够高footer始终位于页面底部
- HTML-CSS-JS Prettify 代码格式化插件
- 网页内容很少时让footer处于最下方
- css改变progress进度条颜色
- css transform实现图片旋转
- Python 中的变量作用域
- css -webkit-line-clamp有什么用?
- css实现超过两行变省略号
- css修改鼠标的颜色样式
文章评论
评论问答