前言

你可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一次的属性值，你可以赋予其一个易懂的变量名，让人一眼就知道这个属性值的用途。
- 在开发中，我们可以将一些 字号、字体颜色、背景颜色 等等定义成变量，然后通过合适的语法使用这些变量；
在工作当中，使用的 CSS预处理器语言 大多数都是 Scss （我工作当中哈😂），所以使用的 Scss变量会多一些，有些项目中需要定制主题色，这就会使用到样式变量了；
下面就来说说我们常见的 CSS预处理器语言 和 CSS 是 怎么定义变量 以及是 怎么使用变量 的；

一、CSS

1.1 基本语法

定义变量关键字 ：
- --；
语法：
css 复制代码
```
--变量名: 属性值;
```

1.2 定义全局变量及使用

❗ 注意：
- 定义 全局变量 需要将变量放置在 :root {} 中；
- 将 存放全局变量的样式文件 导入到 main.ts / main.js 中；
- 定义成全局变量之后，在所有文件的style中就可以使用变量了；

1.2.1 定义变量

css 复制代码

:root {
  --cp-primary: #16C2A3;;
}

1.2.2 使用变量

html 复制代码

<script setup lang="ts"></script>

<template>
  <!-- 验证vant颜色被覆盖 -->
  <van-button type="primary">按钮</van-button>
  <a href="#">123</a>
</template>

<style scoped lang="scss">
<!-- 使用 css 变量 -->
a {
  color: var(--cp-primary);
}
</style>

1.3 定义局部变量及使用

局部变量 ：
- 只有在 当前选择器 或 当前选择器的子元素 中使用；

css 复制代码

div {
  --cp-text1: #121826;
  color: var(--cp-text1);
  
  span {
    color: var(--cp-text1);
  }
}

二、Scss

sass 使用 $ 符号来标识变量(老版本 的 sass 使用 ! 来标识变量。改成 $ 是多半因为!highlight-color看起来太丑了。)，比如$highlight-color和$sidebar-width；
❗ 为什么选择 $ 符号呢 ？
- 因为它好认、更具美感；
- 且在 CSS 中并无他用，不会导致与现存或未来的 css 语法冲突。

2.1 定义变量

定义变量的关键字 ：
- $；
语法：
scss 复制代码
```
$变量名: 属性值;
```

2.2 使用变量

与CSS属性不同，变量可以在css规则块定义之外存在。当变量定义在css规则块内，那么该变量只能在此规则块内使用。如果它们出现在任何形式的{...}块中（如@media或者@font-face块），情况也是如此：

scss 复制代码

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//编译后

nav {
  width: 100px;
  color: #F90;
}

在这段代码中，$nav-color这个变量定义在了规则块外边，所以在这个样式表中都可以像 nav规则块那样引用它。$width这个变量定义在了nav的{ }规则块内，所以它只能在nav规则块内使用。这意味着是你可以在样式表的其他地方定义和使用$width变量，不会对这里造成影响。

2.3 变量引用

凡是css属性的标准值（比如说1px或者bold）可存在的地方，变量就可以使用。css生成时，变量会被它们的值所替代。之后，如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此变量的地方生成的值都会随之改变。

scss 复制代码

$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
}

//编译后

.selected {
  border: 1px solid #F90;
}

看上边示例中的$highlight-color变量，它被直接赋值给border属性，当这段代码被编译输出css时，$highlight-color会被#F90这一颜色值所替代。产生的效果就是给selected这个类一条1像素宽、实心且颜色值为#F90的边框。
在声明变量时，变量值也可以引用其他变量。当你通过粒度区分，为不同的值取不同名字时，这相当有用。下例在独立的颜色值粒度上定义了一个变量，且在另一个更复杂的边框值粒度上也定义了一个变量：

scss 复制代码

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

//编译后

.selected {
  border: 1px solid #F90;
}

这里，$highlight-border变量的声明中使用了$highlight-color这个变量。产生的效果就跟你直接为border属性设置了一个1px $highlight-color solid的值是一样的。最后，我们来了解一下变量命名的实用技巧，以结束关于变量的介绍。

2.4 变量名用中划线还是下划线分隔

sass的变量名可以与css中的属性名和选择器名称相同，包括中划线和下划线。这完全取决于个人的喜好，有些人喜欢使用中划线来分隔变量中的多个词（如$highlight-color），而有些人喜欢使用下划线（如$highlight_color）。使用中划线的方式更为普遍，这也是compass和本文都用的方式。
不过，sass并不想强迫任何人一定使用中划线或下划线，所以这 两种用法相互兼容 。用中划线声明的变量可以使用下划线的方式引用 ，反之亦然。这意味着即使compass选择用中划线的命名方式，这并不影响你在使用compass的样式中用下划线的命名方式进行引用：

scss 复制代码

$link-color: blue;
a {
  color: $link_color;
}

//编译后

a {
  color: blue;
}

在上例中，$link-color和$link_color其实指向的是同一个变量;

三、Less

scss 和 less定义变量的方式很相似，除了 关键字 不同，其他的都一样；

3.1 定义变量

定义变量的关键字 ：
less 复制代码
```
@
```
语法：
less 复制代码
```
@变量名: 属性值;
```

3.2 使用变量

less 复制代码

@width: 10px;
@height: @width + 10px;
#header { width: @width; height: @height; }

// 编译后
#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

前端开发小技巧 - 【Vue / CSS】- 定义变量（CSS、Less、Scss） + 使用变量

前言

一、CSS

1.1 基本语法

1.2 定义全局变量 及 使用

1.2.1 定义变量

1.2.2 使用变量

1.3 定义局部变量 及 使用

二、Scss

2.1 定义变量

2.2 使用变量

2.3 变量引用

2.4 变量名用中划线还是下划线分隔

三、Less

3.1 定义变量

3.2 使用变量

1.2 定义全局变量及使用

1.3 定义局部变量及使用