sass教程高阶使用：定义变量3中方式；

1定义规则

1. 变量以美元符号($)开头，后面跟变量名；
2. 变量名是不以数字开头的可包含字母、数字、下划线、横线（连接符）；
3. 写法同css，即变量名和值之间用冒号(:)分隔；
4. 变量一定要先定义，后使用；

<template>
  <h3>定义变量2中方式</h3>
  <header class="header">字体</header>
</template>

<style lang="scss" scoped>
//1 定义变量 全局变量
$base-color: red;
//2 global 全局定义,可以在一个样式内，但是是全局变量
.container {
  $font-size: 26px !global;
}
.header {
  //3 定义局部变量，只能当前使用
  $font-weight: 600;
  color: $base-color;
  font-size: $font-size;
  font-weight: $font-weight;
}
</style>

2连接符与下划线为同一变量；会覆盖

通过连接符与下划线 定义的同名变量为同一变量；会覆盖

$font-size:14px;

$font_size:16px;

.container{font-size: $font-size;}

3变量值类型

变量值类型
变量值的类型可以有很多种

SASS支持 7 种主要的数据类型

数字，1, 2, 13, 10px，30%
字符串，有引号字符串与无引号字符串，"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)
 

例如

$layer-index:10;
$border-width:3px;
$font-base-family:'Open Sans', Helvetica, Sans-Serif;
$top-bg-color:rgba(255,147,29,0.6);
$block-base-padding:6px 10px 6px 10px;
$blank-mode:true;
$var:null; // 值null是其类型的唯一值。它表示缺少值，通常由函数返回以指示缺少结果。
$color-map: (color1: #fa0000, color2: #fbe200, color3: #95d7eb);

$fonts: (serif: "Helvetica Neue",monospace: "Consolas");
使用

.container {
    $font-size: 16px !global;
    font-size: $font-size;
    @if $blank-mode {
        background-color: #000;
    }
    @else {
        background-color: #fff;
    }
    content: type-of($var);
    content:length($var);
    color: map-get($color-map, color2);
}

.footer {
    font-size: $font-size;
}

// 如果列表中包含空值，则生成的CSS中将忽略该空值。
.wrap {
    font: 18px bold map-get($fonts, "sans");
}
 

4默认值
 

<template>
  <h3>【!default】默认值</h3>
  <header class="header">字体</header>
</template>

<style lang="scss" scoped>
//1.1 定义变量
$base-color: red;
$base-color: blue !default; //表示如果前面没有定义，就使用这个值，定义了就使用前面的
.header {
  color: $base-color; //red
}
</style>