Sass基礎--變量與導入

局部變量

body{
  $color : red;
  color:$color;
}
footer{//footer裏將訪問不到$color變量，由於它是局部的
  color:$color;
}

全局變量

body{
  $color : red !global;
  color:$color;
}
footer{//footer裏將能夠訪問$color變量，由於它是全局的
  color:$color;
}

多值變量

$paddings : 5px 10px 5px 10px;
body{
  padding : $paddings;
}
//若是咱們只想取一個值 如:
padding-left : nth($paddings,1);
//注意：索引是從1開始的不是從0.

• maps類型

$maps:( color:red , borderColor:blue );
body{
  background:map-get($maps,color);
  border-color:map-get($maps,borderColor);
}

部分文件

部分文件通常以'_'下劃線開頭 如：_part1.css
咱們就能夠導入或者引用這個部分文件,減小css的重複

//而後咱們就能夠導入文件了
@import     "_part1.css"

下面三種狀況被識別爲css原生導入
: 被導入文件是以.css結尾
: 被導入文件是一個URL地址(如:http://xxx/xxx.css)
: 被導入文件的名字是CSS的url()值

//導入sass文件 _part1.scss
@import "part1"
//只用寫文件名就能夠了，而後就吧part1的內容寫入當前文件中
//寫'_'和後綴也行