css里如何使用变量
时间: 2023-10-24 20:05:38 浏览: 38
CSS变量是在CSS3中引入的新特性,可以使用 var() 函数定义和使用。具体使用步骤如下:
1. 定义变量:在CSS选择器中使用 -- 号来定义一个变量,如:
```
:root {
--main-color: #ff0000;
}
```
2. 使用变量:在CSS属性值中使用 var() 函数来引用变量,如:
```
p {
color: var(--main-color);
}
```
这样就可以使用变量来设置样式了,当变量的值发生改变时,使用了变量的样式也会自动更新。
相关问题
css calc使用变量
是的,CSS的calc()函数可以使用变量。你可以在calc()函数内使用CSS自定义属性来代表数值,这样就可以动态地计算CSS值了。以下是一个示例:
```
:root {
--width: 100px;
}
.box {
width: calc(var(--width) * 2);
height: calc(var(--width) / 2);
}
```
在这个例子中,我们定义了一个名为“--width”的CSS变量,然后在.box元素的宽度和高度中使用了calc()函数来计算值。由于我们使用了变量,这个值可以根据需要进行更改。
CSS 中使用 JS 变量
在 CSS 中使用 JS 变量,可以通过 CSS 变量(Custom Properties)实现。定义 CSS 变量时,可以使用 var() 函数来引用 JS 变量。
以下是一个例子:
```html
<style>
:root {
--main-color: #ff0000;
}
.box {
background-color: var(--main-color);
}
</style>
<div class="box"></div>
<script>
// JS 变量
const mainColor = "#00ff00";
// 将 JS 变量赋值给 CSS 变量
document.documentElement.style.setProperty('--main-color', mainColor);
</script>
```
在上述例子中,定义了一个名为 `--main-color` 的 CSS 变量,并将其赋值为 `#ff0000`。在 `.box` 类的样式中使用 var() 函数引用了该变量,从而将其作为背景颜色。然后,通过 JS 将 `--main-color` 的值修改为 `#00ff00`,从而改变了背景颜色。