变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（ 局部变量 ），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为 全局变量可以添加 !global 声明 ：

#main {
  $width: 5em !global;
  width: $width;
#sidebar {
  width: $width;
#main {
  width: 5em;
#sidebar {
  width: 5em;
2.数据类型 
 
支持 6 种主要的数据类型：
 
数字，1, 2, 13, 10px
字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
颜色，blue, #04a3f9, rgba(255,0,0,0.5)
布尔型，true, false
空值，null
数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)
 
支持数字的加减乘除、取整等运算 (+, -, *, /, %)
 
以下三种情况 / 将被视为除法运算符号：
 
如果值，或值的一部分，是变量或者函数的返回值
如果值被圆括号包裹
如果值是算数表达式的一部分
 
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; 
圆括号可以用来影响运算的顺序：
 
  width: 1em + (2em * 3);
  width: 7em; 
如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。
 
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
  font: 12px/30px; 
 颜色值运算 (Color Operations)
 
颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值：
 
  color: #010203 + #040506;
计算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09，然后编译为
 
  color: #050709; 
数字与颜色值之间也可以进行算数运算，同样也是分段计算的，比如
 
  color: #010203 * 2;
计算 01 * 2 = 02 02 * 2 = 04 03 * 2 = 06，然后编译为
 
  color: #020406; 
需要注意的是，如果颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。
 
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
  color: rgba(255, 255, 0, 0.75); 
+ 可用于连接字符串
 
  cursor: e + -resize;
  // 这种是无符号字符
  cursor: e-resize; 
注意，如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。
 
p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
p:before {
  content: "Foo Bar";
  font-family: sans-serif; 
运算表达式与其他值连用时，用空格做连接符：
 
  margin: 3px + 4px auto;
  margin: 7px auto; 
在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值（类似于vue的双花括号）： 
 
p:before {
  content: "I ate #{5 + 10} pies!";
p:before {
  content: "I ate 15 pies!"; }
空的值被视作插入了空字符串：
 
$value: null;
p:before {
  content: "I ate #{$value} pies!";
p:before {
  content: "I ate pies!"; 
有以下四个设置：
 vue-scss-variable-scan.globalPath ：SCSS扫描变量的路径（默认值：src / ** / *。scss）
 vue-scss-variable-scan.globalExcludePath ：SCSS扫描变量的排除路径。（默认值：“”）
 vue-scss-variable-scan.addCustomCssProperty ：此扩展仅支持css的某些属性，如果要支持更多属性，则可以在此设置中添加一些属性。（默认：[]）（PS：默认支持：[“背景”，“边框”，“颜色”，“宽度”，“高度”，“字体大小”，“填充”，“边距”]）
 vue-scss-variable-scan.excludeCssProperty ：如果您不
                                    SCSS编译环境安装：live-sass-compiler、node sass；嵌套语法：选择器嵌套、属性嵌套、&父选择器；注释；变量；运算；混入 @mixin 和 @inclue；占位选择器 % 和 继承 @extend；插值语法 #{}；流程控制@if@for@each@while；内置函数；自定义函数 @function；导入@import；模块导入 @use；模块转发 @forward
                                    　　SCSS之所以便利，是因为它具有了编程语言的某些特性。
　　让原本规则刻板的CSS变的灵活起来，下面介绍一下SCSS中的作用域概念。
　　几乎所有编程语言都有作用域概念的涉及，原理大同小异，SCSS中的也是如此。
　　SCSS中，变量具有两种作用域类型：
　　（1）.全局作用域。
　　（2）.局部作用域。
　　默认情况下，定义在选择器之内的变量为局部变量，定义在选择器之外...
在 Vue 中将 data 中的变量反映到 css 变量上也是大势所趋。
Vue2 用法
在以前的 Vue2 中，我们通常使用计算属性反映 data 中的 变量到 css 中：
<template>
  <div :style="cssVars">
    <p class="text">测试文本</p>
</template>
                                    名词解释li {font-size: 33px;height: 344px;}上面整段代码，叫做一个规则，一个规则包括选择符、大括号、声明，声明包括属性名、属性值。一个声明包括属性名、属性值。font-size就是属性名，有时候叫属性33px就是属性值，有时候叫值变量$变量也有作用域，是块级作用域。变量可以被重新赋值，就像编程语言那样。只有下述情况才适合使用变量：该值至少重复出现了三次；该值至少可...
                                    模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为’axis’ 的时候，会有多个系列的数据，此时可以通过{a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的{a}，{b}，{c}，{d}含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：
u 折线（区域）图、柱状（条形）图、K线图: {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
u 散点图（气泡）图
                                    作者：小猪努力学前端https://juejin.cn/post/7055101823442485255前言今时不同往日，能叫我们切图仔的只能是我们自己！在JavasScrip框架满天飞的...