二.变量的引用:

变量的引用有一个原则，那就是标准css属性值存在的地方，变量就可以存在。

当编译成css文件的时候，变量会被变量值所替代。当要修改css的一个属性值时，只要修改对应的变量值即可，没有必要处处修改，这也是scss的优点之一。

.page {
    color: $bg-color;
 
　　在声明变量的时候，还可以再引用其他变量，代码如下:
 
  
$white-color: #FFFFFF;
$my-border: 1px solid $white-color;
.my-table{
  border: $my-border:
 
　　编译成css代码如下:
 
  
.my-table{
  border: 1px solid #FFFFFF;
转载于:https://www.cnblogs.com/ibabyli/p/9849811.html
                    一、变量的声明　　使用$符号可以标识一个变量$bg-color: #FFFFFF;二.变量的引用:　　变量的引用有一个原则，那就是标准css属性值存在的地方，变量就可以存在。　　当编译成css文件的时候，变量会被变量值所替代。当要修改css的一个属性值时，只要修改对应的变量值即可，没有必要处处修改，这也是scss的优点之一。.page {  ...
有以下四个设置：
 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基本使用 具体详情请看官网less,  sass, scss都是css预处理语言（也是对应的文件后缀名），它们的语法功能比css更强大。预处理语言使用是：开发时用预处理语言，在打包上线时，用webpack再配合loader工具给转成css（Cascading Style Sheets）给浏览器使用。细节：我们在实际开发过程中，scss是常用写法内容：嵌套语法； &父选择器；变量；mixins；模块和less一样，scss同样支持嵌套型的语法
转化成css后定义变量：sass使用$符号来标识
				
1. Scss 简介
Sass (Syntactically Awesome Stylesheets) 是一种动态样式语言，Sass 语法属于缩排语法，比 css 比多出好些功能 (如：变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。
Sass 的缩排语法，对于写惯 css 前端的 web 开发者来说很不直观，也不能将 css 代码加入到 Sass 里面。
因此对 Sass 语法进行了改良，Sass3 就变成了 Scss(Sassy CSS)。SCSS(Sassy CSS) 是 
首先要装两个插件
"style-resources-loader": "^1.3.3",
"vue-cli-plugin-style-resources-loader": "^0.1.4",
如果装完报错，建议用npm再装一次
文件_variables.scss
/* Variables */
// Base color
$blue:#324157;
$light-blue:#3A71A8;
$red:#C03639;
$pink: #E65D6E;
$green: #30