【无标题】

CSS3 中如何定义和使用变量

CSS 中的 var() 函数用于插入 CSS 变量的值‌。CSS 变量可以访问 DOM，这意味着您可以使用 JavaScript 来修改变量，并且基于媒体查询来修改变量。使用 var() 函数可以避免在样式表中重复相同的值，特别是在设计颜色时非常有用‌。

一、变量定义‌

CSS变量名必须以两个破折号（–）开头，并且区分大小写。例如：

--blue: #1e90ff;
--white: #ffffff;

1. 全局/局部变量‌

全局变量可以在整个文档中使用，而局部变量只能在声明它的选择器内部使用。例如：

:root { 
	--blue: #1e90ff; 
} /* 全局变量 */
.container { 
	--green: #00ff00; 
} /* 局部变量 */

二、变量使用‌

使用 var() 函数来获取变量的值。例如：

body { 
	background-color: var(--blue); 
}
h2 { 
	border-bottom: 2px solid var(--blue); 
}

1. 默认值

‌默认值‌：var() 函数可以接受第二个参数作为默认值，当变量未定义时使用。例如：

color: var(--foo, #7F583F);

2. 高级用法

‌拼接和计算‌：CSS变量可以进行拼接和计算。例如：

:root { 
	--width: 100px; 
	--padding: 10px; 
}
div { 
	width: calc(var(--width) + var(--padding)); 
} /* 结果为 120px */

三、使用 JavaScript 修改‌

CSS 变量可以访问 DOM，因此可以通过 JavaScript 来修改变量的值。例如：

document.documentElement.style.setProperty('--blue', '#333333');

四、应用

全局定义字体颜色、字体大小等变量，在项目中有需要时使用变量。

// var.scss
:root {
  --color-white: #ffffff;

  /* //Primary color <主色> */
  --color-primary: #3b5cff; /*主色*/
  --color-primary-light-2: #4080ff; /*主色悬停*/
  --color-primary-click: #0e40cb; /*主色点击色*/
  --color-primary-disabled: #bedaff; /*主色禁用色*/

  /* //Success color */
  --color-success: #00b42a; /*成功色*/
  --color-success-light-2: #23c343; /*成功色悬停*/
  --color-success-click: #009a29; /*成功色点击色*/
  --color-success-disabled: #004811; /*成功色禁用色*/

  /* //Warning color */
  --color-warning: #ff7d00; /*警告色*/
  --color-warning-light-2: #ff9a2e; /*警告色悬停*/
  --color-warning-click: #d25f00; /*警告色点击色*/
  --color-warning-disabled: #663200; /*警告色禁用色*/

  /* //Danger color */
  --color-danger: #f53f3f; /*错误色*/
  --color-danger-light-2: #f76560; /*错误色悬停*/
  --color-danger-click: #cb2634; /*错误色点击色*/
  --color-danger-disabled: #621919; /*错误色禁用色*/
}

/* 点击文字 */
// glabol.scss
.click-text {
  cursor: pointer;
  color: var(--color-primary);
  &:hover {
    color: var(--color-primary-light-2);
  }
  &:active {
    color: var(--color-primary-click);
  }
  &.is-disabled {
    color: #bedaff;
    cursor: not-allowed;
  }
}