Sass 变量

Sass变量

变量是存储稍后再使用的信息的一种方式，有了存储空间，您能够将信息存储在变量中，好比：

• 字符串（strings）

• 数字（numbers）

• 颜色（colors）

• 布尔运算（booleans）

• 列表（lists）

• 空值（nulls）

Sass使用 $ 符号后跟一个名称来声明变量。变量语法：$variablename: value;

// HTML 部分
<h1>Hello Xkd</h1>
<p>变量</p>
<div id="container">这是容器中的一些文本</div>
​
// .scss 语法
// 声明变量
$font1: Helvetica, sans-serif;
$color1: green;
$fontSize1: 18px;
$padding1: 5px 10px;
body {
  font-family: $font1;
  font-size: $fontSize1;
  color: $color1;
}
#container {
  padding: $padding1;
}

// .css 输出
// 当编译Sass 文件时，它会获取变量（以上的font一、fontSize一、color一、paddin1等），而后输出正常的普通值，并将这些变量值放在CSS中
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: green;
  padding: 0 50px;
}
#container {
  border: 2px red solid;
  padding: 5px 10px;
}

Sass 可变范围

Sass变量仅在定义它们的嵌套级别可用。

// HTML 部分
<h1>Hello Xkd</h1>
<p>变量</p>

// scss 语法
$myColor: red;
h1 {
  $myColor: green;
  color: $myColor;
}
p {
  color: $myColor;
}

// css 输出
h1{
  color: green;
}
p{
  color: red;
}

<p> 标签内的文字颜色不管是红色仍是绿色，它最后显示都会变红。

另外一个定义是，$ myColor：green; 在 <h1> 规则内，只有在那里可用，因此它在 css 中的输入如上所示。

使用 Sass！global

变量范围的默认行为能够经过使用 ！global 开关来覆盖变量做用域。

！global 表示变量是全局的，这意味着它能够在全部级别上访问。

上面一样的例子，咱们给 h1 添加一个 !global，那么原来定义的 $myColor:red; 这时候就失效了，它的颜色为green。

$myColor: red;
h1 {
  $myColor: green !global;
  color: $myColor;
}
p {
  color: $myColor;
}

// 输出 css
h1 {
  color: green;
}
p {
  color: green;
}

提示：全局变量应该在任何规则以外定义。

明智的作法是在它本身的名为“_globals.scss”的文件中定义全部全局变量，并用@include关键字包含该文件。