css变量
css变量的基本使用
- 定义变量：使用
--前缀定义一个变量，并为其指定一个值。
:root {
--primary-color: #007bff;
}
2.使用变量：通过 var() 函数使用变量。在需要的地方，将 var() 函数包裹在 CSS 属性的值中，并指定变量 名。
cssCopy code.btn {
background-color: var(--primary-color);
color: white;
}
css变量的命名规则
- 变量名必须以双减号（--）开头，后跟变量的名称。例如：
--primary-color。 - 变量名可以包含字母（大小写敏感）、数字、破折号（-）和下划线（_）。不过，建议使用驼峰命名法或破折号连接的命名法，例如：
--background-color或--primaryColor。 - 变量名不应该以数字开头，但可以包含数字。例如，
--font-size-2是有效的。 - 变量名是区分大小写的。例如，
--primary-color和--Primary-Color是不同的变量。 - 变量名可以在选择器内部或全局范围内定义。在
:root伪类选择器内定义的变量将在整个文档中全局可用。
cssCopy code:root {
--primary-color: blue;
}
- 变量名应该具有描述性和可读性。使用有意义的名称来反映变量的用途或表示的值。
- 变量名通常采用小写字母，以增加可读性，并使用破折号作为单词间的分隔符。例如：
--text-color。
请注意，这些规则是一些通用的最佳实践，可以根据你的项目需求和团队约定进行适当的调整。保持一致性和可读性是命名变量的关键。
css变量的方法和函数
CSS 变量（或 CSS 自定义属性）具有一些方法和函数，可以用于在 CSS 中操作和处理这些变量。以下是一些常用的 CSS 变量方法：
- var() 函数：用于引用 CSS 变量的值。它接受一个参数，即要引用的变量的名称。可以在 CSS 的属性值、选择器或计算函数中使用 var() 函数。
cssCopy code.element {
color: var(--primary-color);
}
- calc() 函数：允许在 CSS 属性值中进行简单的数学计算。可以与 CSS 变量一起使用。
cssCopy code.element {
width: calc(100% - var(--margin-size));
}
- getComputedStyle() 方法：在 JavaScript 中使用该方法可以获取元素的计算后样式，包括 CSS 变量的值。可以使用该方法获取计算后的 CSS 变量值并进行进一步的处理。
javascriptCopy codeconst element = document.querySelector('.element');
const styles = getComputedStyle(element);
const primaryColor = styles.getPropertyValue('--primary-color');
console.log(primaryColor);
- setProperty() 方法：通过 JavaScript 动态修改 CSS 变量的值。使用该方法可以在运行时更改 CSS 变量的值。
javascriptCopy codeconst root = document.documentElement;
root.style.setProperty('--primary-color', 'red');
- 使用 JavaScript 操作 CSS 变量：可以通过 JavaScript 直接操作 CSS 变量的值。可以获取元素的样式对象，然后通过样式对象访问和修改 CSS 变量的值。
javascriptCopy codeconst element = document.querySelector('.element');
element.style.setProperty('--primary-color', 'blue');
const primaryColor = element.style.getPropertyValue('--primary-color');
console.log(primaryColor);
这些方法可以帮助你在 CSS 和 JavaScript 中有效地操作和处理 CSS 变量。你可以使用它们来动态更改样式、执行计算和获取变量值，从而实现更灵活和交互性的样式效果。
