sass 变量

css 变量

• 定义 css 变量, css 定义变量 通过--来定义，例如：

div {
  --color: red;
}

• 使用 css 变量 通过var(变量名)来使用

:root {
  --color: blue;
}

div {
  background-color: var(--color);
}

scss 变量的定义

定义规则：

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

语法： $highlight-color: #F90;

连接符与下划线

通过连接符与下划线 定义的同名变量为同一变量，建议使用连接符

$font-size: 14px;
$font_size: 16px;
.container {
  font-size: $font-size;
}

变量作用域

局部变量

定义在选择器内部的变量，只能在选择器范围内使用

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

全局变量

定义后能全局使用

1. 定义在选择器外面的最前面定义的变量

$font-size: 16px;

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

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

2. 使用!global标志定义全局变量

.container {
  $font-size: 16px !global;
  font-size: $font-size;
}

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

变量值类型

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

SASS 支持 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)

例如：

$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: #fbbe200,
  color3: #95d7eb,
);

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

使用

.container {
  $font-size: 16px !global;
  font-size: $font-size;
  @if blank−modebackground−color: #000 ;
  @elsebackground−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");
}

默认值

用!default来设置变量默认值

$color: #333;

//如果 color 之前没定义就使用如下的默认值
$color: #666 !default;

.container {
  border-color: $color; // #333
}

父选择器&

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。

例如有这么一段样式：

.container {
  width: 1200px;
  margin: 0 auto;
}
.container a {
  color: #333;
}
.container a:hover {
  text-decoration: underline;
  color: #f00;
}
.container .top {
  border: 1px #f2f2f2 solid;
}
.container .top-left {
  float: left;
  width: 200px;
}

• 用 sass 编写

.container {
  width: 1200px;
  margin: 0 auto;
  a {
    color: #333;
    &:hover {
      text-decoration: underline;
      color: #f00;
    }
  }
  .top {
    border: 1px #f2f2f2 solid;
    &-left {
      float: left;
      width: 200px;
    }
  }
}