Sass 变量

前言

• 变量用于存储一些信息，它可以重复使用。

1、变量

• Sass 变量可以存储以下信息：

  • 字符串
  • 数字
  • 颜色值
  • 布尔值
  • 列表
  • null 值

• Sass 变量使用 $ 符号。

  $variablename: value;

• 以下实例设置了四个变量：myFont, myColor, myFontSize, 和 myWidth。变量声明后我们就可以在代码中使用它。

  $myFont: Helvetica, sans-serif;
  $myColor: red;
  $myFontSize: 18px;
  $myWidth: 680px;
  
  body {
    font-family: $myFont;
    font-size: $myFontSize;
    color: $myColor;
  }
  
  #container {
    width: $myWidth;
  }

• 将以上代码转换为 CSS 代码，如下所示。

  body {
    font-family: Helvetica, sans-serif;
    font-size: 18px;
    color: red;
  }
  
  #container {
    width: 680px;
  }

2、作用域

• Sass 变量的作用域只能在当前的层级上有效果，如下所示 h1 的样式为它内部定义的 green，p 标签则是为 red。

  $myColor: red;
  
  h1 {
    $myColor: green;   // 只在 h1 里头有用，局部作用域
    color: $myColor;
  }
  
  p {
    color: $myColor;
  }

• 将以上代码转换为 CSS 代码，如下所示。

  h1 {
    color: green;
  }
  
  p {
    color: red;
  }

2.1 !global

• 在 Sass 中可以使用 !global 关键词来设置变量是全局的。

  $myColor: red;
  
  h1 {
    $myColor: green !global;  // 全局作用域
    color: $myColor;
  }
  
  p {
    color: $myColor;
  }

• 现在 p 标签的样式就会变成 green。将以上代码转换为 CSS 代码，如下所示。

  h1 {
    color: green;
  }
  
  p {
    color: green;
  }

• 注意：所有的全局变量我们一般定义在同一个文件，如：_globals.scss，然后我们使用 @include 来包含该文件。