STYLE 中使用lang=“scss” ，怎么声明变量，并操作这个变量

在 Vue 中，使用 `lang="scss"` 的 `<style>` 标签是为了编写 SCSS (Sass) 风格的 CSS。要声明和操作变量，你需要按照 SCSS 的语法步骤来做：

1. **声明变量**:

   $variable-name: value; // 假设你想声明一个名为 "$primary-color" 的变量，给定值 "blue"

这里 `$variable-name` 是变量名，`value` 是你想要赋给变量的初始值。

2. **引用变量**:
在样式规则中，你可以通过 `$` 符号直接引用已声明的变量：

   .my-class {
     color: $primary-color;
   }

3. **变量运算**:
SCSS 允许对变量做算术运算或混合运算：

   $size: 20px;
   $new-size: $size * 2; // 新变量$new-size的值将是40px

4. **条件变量**:
也可以根据条件设置变量值，如：

   @if $is-dark-theme {
     $background-color: black;
   } else {
     $background-color: white;
   }

5. **混合** (MIXINS):
SCSS 提供混合（mixin），可以复用样式代码：

   @mixin button-style($color) {
     background-color: $color;
     /* ... */
   }

   .my-button {
     @include button-style($primary-color);
   }