css变量分类 |photoshopcss教程

:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
}
.button {
color: var(--primary-color); 
}
.container {
background-color: var(--secondary-color);
}

CSS变量可以根据作用域不同分为全局变量和局部变量两类。

全局变量

全局变量是指在不同作用域中都能够访问的变量，一般定义在:root伪类中，全局变量的作用域包括整个文档。

:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
}
.button {
color: var(--primary-color); 
}
.container {
background-color: var(--secondary-color);
}

在上面的例子中，这些变量可以在文档的任何地方使用，且有多个选择器都在使用它们。

局部变量

局部变量是指只能在特定作用域中访问的变量，一般定义在选择器中，局部变量的作用域仅限于声明它的选择器内部。

.element1 {
--primary-color: #007bff;
color: var(--primary-color);
}
.element2 {
--primary-color: #6c757d;
color: var(--primary-color);
}

在上面的例子中，局部变量只在各自的选择器内部有效，不会影响到其他选择器。

以上就是CSS变量可以根据作用域不同划分的两类。同时，CSS变量也可以按照变量类型（如颜色、字体大小等）进行分类。