2.Sass 变量

1.变量

Sass 变量使用 $ 符号
可以存储的信息：字符串、数字、颜色值、布尔值、列表、null值

/* 1.变量声明 */ 
/* $variablename: value; */
$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

/* 在代码中使用 */
body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}
.container {
  width: $myWidth;
}

2.作用域

/* Sass 变量的作用域只能在当前的层级上有效果 */
$myColor: red;

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

// ==> h1{color: green;} p{color: red;}

3.!global

$myColor: red;

h1 {
  $myColor: green !global;  // 全局作用域
  color: $myColor;
}
p {
  color: $myColor;
}
// ==> h1{color: green;} p{color: green;}
/* 现在 p 标签的样式就会变成 green  */

上一篇：1.Sass简介 >>

下一篇：3.Sass 嵌套规则与属性 >>