sass有兩種后綴名文件：
一種后綴名為sass，寫(xiě)選擇器時(shí)不能使用大括號(hào)和分號(hào)
一種后綴名為scss，使用大括號(hào)和分號(hào)
重慶分公司
重慶分公司
//后綴名為sass的語(yǔ)法，不能出現(xiàn)大括號(hào)和分號(hào)
$highlight-color: #abcdef
.selected
border: 1px $highlight-color solid
//后綴名為scss的語(yǔ)法，跟css一樣，需要大括號(hào)和分號(hào)
$highlight-color: #abcdef;
.selected{
border:1px solid $highlight-color;
}Sass的一個(gè)重要特性就是它為CSS引入了變量。你可以把反復(fù)使用的CSS屬性值定義成變量，然后通過(guò)變量名來(lái)引用它們，而無(wú)需重復(fù)書(shū)寫(xiě)這一屬性值。或者，對(duì)于僅使用過(guò)一次的屬性值，你可以賦予其一個(gè)易懂的變量名，讓人一眼就知道這個(gè)屬性值的用途
Sass使用“$”來(lái)標(biāo)識(shí)變量，比如: $highlight-color, $width
變量聲明
1、普通變量
Sass變量的聲明跟CSS屬性的聲明很像，后面緊跟變量名，變量名和值之間用冒號(hào)分隔開(kāi)
$highlight-color: #abcdef;
這就意味著變量$highlight-color現(xiàn)在的值是#abcdef，這時(shí)的變量還沒(méi)有生效，除非你引用了這個(gè)變量
.selected{
border:1px solid $highlight-color;
}2、默認(rèn)變量
如果值后面加 "!default" 則表示默認(rèn)值
無(wú)"!default"
//scss
$color:red;
$color:blue;
p{
color:$color;
}
//css編譯
p {
color: blue; }有"!default"
//scss
$color:red;
$color:blue !default;
p{
color:$color;
}
//css編譯
p {
color: red; }sass編譯css是從上到下的，后面會(huì)覆蓋前面的，所以第一段無(wú)!default的解析的是blue，而第二段代碼由于有了!default，打破了這個(gè)規(guī)則，使用了前面定義的red
//scss
$baseLineHeight:2px; //這個(gè)寫(xiě)在帶有!default的變量后面就沒(méi)有任何意義了
$baseLineHeight:1.5px !default;
.box{
line-height:$baseLineHeight;
}
//css編譯
.box {
line-height: 2px; }3、#{} 讓一切變成字符串
一般我們定義的變量都為屬性值，可直接使用，但是如果變量作為屬性、選擇器或在某些特殊情況下等則必須要以#{$variables}形式使用。
//scss
$borderDirection: top !default;
$baseFontSize: 12px !default;
$baseLineHeight:1.5 !default;
//應(yīng)用于class和屬性
.border-#{$borderDirection}{
border-#{$borderDirection}:1px solid #ddd;
}
//應(yīng)用于復(fù)雜的屬性值
body{
font:#{$baseFontSize}/#{$baseLineHeight};
}
//css編譯
.border-top {
border-top: 1px solid #ddd; }
body {
font: 12px/1.5; }//scss
@mixin firefox-message($selector) {
body.firefox #{$selector}:before {
content: "Hi, Firefox users!";
}
}
@include firefox-message(".header");
//css編譯
body.firefox .header:before {
content: "Hi, Firefox users!"; }如果不用行不行呢？不妨試試看：
//scss
body{
font:$baseFontSize/$baseLineHeight;
}
//css編譯
body {
font: 8px; }字體成了8px，因?yàn)檎`做了除法，上面的border-top如果不加#{}的話，無(wú)法編譯
4、多值變量
多值變量分為list類(lèi)型和map類(lèi)型，簡(jiǎn)單來(lái)說(shuō)list類(lèi)型有點(diǎn)像js中的數(shù)組，而map類(lèi)型有點(diǎn)像js中的對(duì)象。
（1）、list
list數(shù)據(jù)可通過(guò)空格，逗號(hào)或小括號(hào)分隔多個(gè)值，可用nth($var,$index)取值。關(guān)于list數(shù)據(jù)操作還有很多其他函數(shù)如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等
//一維數(shù)據(jù) $px: 5px 10px 20px 30px; //二維數(shù)據(jù)，相當(dāng)于js中的二維數(shù)組 $px: 5px 10px, 20px 30px; $px: (5px 10px) (20px 30px);
//scss
$linkColor: #f00 #eee !default;//第一個(gè)值為默認(rèn)值，第二個(gè)值為鼠標(biāo)滑過(guò)值
a{
color:nth($linkColor,1);
&:hover{
color:nth($linkColor,2);
}
}
//css編譯
a {
color: #f00; }
a:hover {
color: #eee; }（2）、map
map數(shù)據(jù)以key和value成對(duì)出現(xiàn)，其中value又可以是list。格式為：$map: (key1: value1, key2: value2, key3: value3);。可通過(guò)map-get($map,$key)取值。關(guān)于map數(shù)據(jù)還有很多其他函數(shù)如map-merge($map1,$map2)，map-keys($map)，map-values($map)等
//scss
$headings:(h2:2em, h3:1.5em, h4:1em);
@each $header, $size in $headings{
#{$header}{
font-size:$size;
}
}
//css編譯
h2 {
font-size: 2em; }
h3 {
font-size: 1.5em; }
h4 {
font-size: 1em; }上面的代碼中，把map數(shù)據(jù)的屬性看作是$header，把屬性值看作是$size進(jìn)行遍歷（當(dāng)成了js對(duì)象去理解，所以稱(chēng)之為屬性和屬性值，這種說(shuō)法不一定對(duì)）
變量運(yùn)算
你能夠運(yùn)用‘加’或‘減’操作符來(lái)對(duì)相同類(lèi)型的變量進(jìn)行運(yùn)算，如果我們想要手動(dòng)的輕微的加深一個(gè)顏色值，可以通過(guò)'-'來(lái)減去#101，同樣我們可以通過(guò)‘+’來(lái)將字體值增大10px。
//scss
$red:#f00;
$fontSize:12px;
.bar{
color:$red+#101;
font-size:$fontSize+10px;
}
//css編譯
.bar {
color: #ff0011;
font-size: 22px; }全局變量和局部變量
首先聲明：當(dāng)前sass版本是3.4.22，與之前的3.3版本相比，有關(guān)全局變量這塊有所不同。跟著原來(lái)的文檔學(xué)習(xí)，在編譯的時(shí)候出現(xiàn)了差異，困擾了我很久，去一些交流群?jiǎn)栠€被人夾槍帶棒的嘲笑，最后非常慶幸得到大漠老師的指導(dǎo)，指出版本的差異并分享了較新的文檔資料，在這里再次感謝大漠老師！??！
大漠老師文章：http://www.w3cplus.com/preprocessor/understanding-variable-scope-in-sass.html
在當(dāng)前大部分文檔中都有這么一句話“sass沒(méi)有局部變量”，并且隨處可見(jiàn)這種示例
大家不妨把sass代碼重新編譯一下，我們得到的結(jié)果卻是：
所以，如果跟我一樣是sass初學(xué)者的話，就跳過(guò)你看到的那些老的文檔關(guān)于變量作用域的介紹吧
sass變量作用域支持兩種類(lèi)型變量：全局變量和局部變量
全局變量：默認(rèn)情況下，所有定義在任何選擇器之外的變量被認(rèn)為是全局變量。這就意味著他們可以在樣式表中任意地方被訪問(wèn)
$bg-color: green;
局部變量：定義在選擇器之內(nèi)的變量稱(chēng)之為局部變量
先看第一個(gè)例子，首先定義一個(gè)混合器，在里面添加一個(gè)$btn-bg-color變量，這是一個(gè)局部變量，它只在mixin內(nèi)部可見(jiàn)
@mixin button-style {
$btn-bg-color: lightblue;
color: $btn-bg-color;
}接下來(lái)，調(diào)用這個(gè)mixin
button {
@include button-style;
}
//執(zhí)行css編譯
button {
color: lightblue;
}如果不是一個(gè)mixin，而是一個(gè)選擇器來(lái)調(diào)用這個(gè)局部變量，可以想象，應(yīng)該是無(wú)法調(diào)用的吧
嵌套選擇器
如果我們?cè)谝粋€(gè)選擇器內(nèi)部聲明了一個(gè)變量，嵌套在里面的其他選擇器中都可以訪問(wèn)它
//scss
.wrap {
$bg-color: red;
&:after {
background: lighten($bg-color, 10%);
}
}
//css
.wrap:after {
background: #ff3333;
}再看一個(gè)例子，我們定義了一個(gè)函數(shù)，然后在嵌套的選擇器中使用這個(gè)函數(shù)
//scss
@function my-function() {
$text-color: black;
@return $text-color;
}
.wrap {
color: my-function();
}
//css
.wrap {
color: black;
}我們稍加修改一下：
//scss
@function my-function() {
$text-color: black;
@return $text-color;
}
.wrap {
color: my-function();
&:after{
background: $text-color;
}
}
編譯的結(jié)果是變量$text-color未定義，因?yàn)樗皇侵苯佣x在選擇器里面，而是在選擇器內(nèi)部調(diào)用了定義的函數(shù)
全局變量和局部變量可以定義相同的變量名，我們定義了三個(gè)相同變量名的變量，只是他們具有不同的值。第一個(gè)是全局變量，其他兩個(gè)是局部變量
//scss
//定義一個(gè)全局變量
$text-color: tomato;
//定義一個(gè)混合器
@mixin button-style {
$text-color: lime;
color: $text-color;
}
@mixin link-style {
$text-color: black;
color: $text-color;
}
//調(diào)用混合器
button {
@include button-style;
}
a {
@include link-style;
}
//調(diào)用變量
.wrap {
background: $text-color;
}
//css
button {
color: lime; }
a {
color: black; }
.wrap {
background: tomato; }Global標(biāo)志
"!global"可以改變一個(gè)局部變量的作用范圍，回到我們一開(kāi)始探討sass版本的那個(gè)例子
//scss
p{
$color:blue !global;
color:$color;//blue
}
a{
color:$color;//本來(lái)應(yīng)該是Undefined variable
}
理論上，$color是定義在p里面的局部變量，a選擇器里面的color應(yīng)該是訪問(wèn)不到的，但是我們通過(guò)"!global"標(biāo)志可以讓$color發(fā)揮一個(gè)全局變量的作用
檢查一個(gè)變量是否存在
Sass提供了兩個(gè)函數(shù)，用來(lái)測(cè)試一個(gè)變量是否存在。我們可以使用variable-exists或global-variable-exists函數(shù)來(lái)檢查我們的局部變量或全局變量是否分別存在
//scss
$text-color: tomato;
@if(global_variable_exists(text-color)){
#mainTitle{
color:$text-color;
}
}
//css
#mainTitle {
color: tomato; }有一定英語(yǔ)基礎(chǔ)的朋友，也可以從下面兩個(gè)網(wǎng)站學(xué)習(xí)
http://sass-lang.com/documentation/file.SASS_REFERENCE.html
https://webdesign.tutsplus.com/articles/understanding-variable-scope-in-sass--cms-23498
創(chuàng)新互聯(lián)www.cdcxhl.cn，專(zhuān)業(yè)提供香港、美國(guó)云服務(wù)器，動(dòng)態(tài)BGP最優(yōu)骨干路由自動(dòng)選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機(jī)房獨(dú)有T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動(dòng)現(xiàn)已開(kāi)啟，新人活動(dòng)云服務(wù)器買(mǎi)多久送多久。
