//後綴名為sass的文件
body
    background: #eee
    font-size: 14px

//後綴名為scss的文件
body {
    background: #eee;
    font-size: 14px;
}

所有的scss導入文件都可以忽略後綴名 .scss 。一般來說基礎的文件命名方式都是以下劃線_開頭，如 _mixin.scss 。這種文件在導入的時候可以不寫下劃線，可寫成 @import ‘mixin‘;

被導入的scss文件 a.scss

//_a.scss

body {
    background: #eee;
}

需要導入樣式的scss文件 b.scss

@import ‘reset.css‘; //導入reset.css
@imort ‘a‘;//導入a.scss文件

p 
 
{
    background: #ccc;
}

編譯出來的b.css樣式：

@import ‘reset.css‘;
body {
    background: #eee;
}
p {
    background: #ccc;
}

根據上面的代碼可以看出，b.scss編譯後，a.scss直接合並到了編譯文件中，[email protected]

註釋

sass有兩種註釋方法,一種是標準的css註釋方式 /**/，另一種是//雙斜杠形式的單行註釋，不過這種單行註釋不會被編譯出來

標準的css註釋

/*
*我是css標準註釋
*設置p標簽背景色
*/

p {
    background
 
: #ccc;
}

雙斜杠單行註釋

//我是單行註釋
//設置p標簽背景色
p {
    background: #ccc;
}

變量

sass的變量必須以$開頭，後面緊跟變量名，而變量值與變量名之間以冒號“:”隔開（就像設置css屬性一樣），如果值後面加上!default 則表示默認值；

普通變量

定義之後可以在全局使用它

//sass style

$font-base: 14px;

p {
    font-size: $font-base;
}

//css style

p {
    font-size: 14px;
}

默認變量

sass的默認變量只需要在值後面加上 !default 即可

// sass style

$base-lineHeight: 1.5 !default;
body {
    line-height: $base-lineHeight;
}

//css style

body {
    line-height: 1.5;
}

sass的默認變量一般是用來設置默認值，然後根據需求來覆蓋的，覆蓋的方式也很簡單，只需要重新定義一下就可以了

//sass style
/*
*覆蓋的順序沒有限制，可以在默認變量的後面也可以在前面
*/

$base-lineHeight: 1.5 !default;
$base-lineHeight: 2;
body {
    line-height: $base-lineHeight; 
}

//css style

body {
    line-height: 2;
}

可以看出編譯完成的 line-height: 2; 而不是 line-height: 1.5; 。默認變量的價值在組件化開發的時候非常有用。

特殊變量

一般我們定義的變量都是屬性值，可直接使用，但是如果變量作為屬性的時候，我們就不能像之前那樣使用了，比需要 #{$variable} 的形式使用

//sass style

$border-direction: top !default;
$base-fontSize: 14px !default;
$base-lineHeight: 1.5 !default;

//應用class和屬性
.border-#{$border-direction} {
    border-#{$border-direction}: 1px solid #ccc;  
}
//應用復雜的屬性
body {
    font: #{$base-fontSize}/#{$base-lineHeight};
}
//css style

.border-top {
    border-top: 1px solid #ccc;
}
body {
    font: 14px/1.5;
}

局部變量

sass在3.4版本之前沒有類似於局部變量，但是在3.4版本之後就出現了局部變量，類似於函數的定義方式，在大括號之外的變量為全局變量（設置了 !global 變量的例外，一會兒提到），在大括號之內的變量只會作用於大括號範圍內的變量；

//sass style
$base-fontSize: 12px;
p {
    $base-fontSize: 14px;
    font-size: $base-fontSize;
}
body {
    font-size: $base-fontSize;
}

//css style
p {
    font-size: 14px;
}
body {
    font-size: 12px;
}

由於在p標簽聲明的變量是局部變量，所以影響不到外面的變量，body標簽的字體大小還是12px；

全局變量

全局變量相對於局部變量，聲明變量的位置在大括號外面，或者在大括號內使用了 !global 也會成為全局變量；

//sass style
$base-fontSize: 12px;
p {
    $base-fontSize: 14px !global;
    font-size: $base-fontSize;
}
body {
    font-size: $base-fontSize;
}

//css style
p {
    font-size: 14px;
}
body {
    font-size: 14px;
}

sass語法一（變量篇）