在線轉換：https://www.sass.hk/css2sass/
Sass 是一種 CSS 的預編譯語言。它提供了 變量（variables）、嵌套（nested rules）、 混合（mixins）、 函數（functions）等功能。

SCSS文件的后綴：.scss
SASS文件的后綴：.sass

在項目中還是引用“.css”文件，Sass 只不過是做為一個預處理工具：用SASS的格式寫好樣式文件，編譯成為CSS文件，在項目中調用。

一、Sass的基本特性-基礎
1.1變量

（1.1.1）示例（全局變量–變量定義在最外層）：
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack; //font: 100% Helvetica, sans-serif;
color: $primary-color; //color: #333;
}
（1.1.2）示例（局部變量–變量定義在樣式名中）：
em {
$color: red;//定義局部變量
a {
color: $color;//調用局部變量
}
}
（1.1.3）示例（全局變量–變量名：變量值 ！global）
$color:red!global;則表示在塊內塊外都可以使用這個變量。（1.1.4）變量默認值默認變量：$baseLineHeight:1.5 !default;
覆蓋默認變量：
只需要在默認變量之前重新聲明下變量即可。
即：$baseLineHeight: 2;
$baseLineHeight:1.5!default;調用$baseLineHeight時，當變量變量已經被賦值，不會再被重新賦值；如果變量還沒有被賦值，則會被賦予新的值。
例子：
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
調用時變量值為2。
例子：
$baseLineHeight: null;
$baseLineHeight: 1.5 !default;
調用時變量值為1.5。

1.2嵌套
（1.2.1選擇器嵌套）
示例1：
#main p {
width: 100%;
.redbox {
background-color: #ff0000;
}
}
編譯為：
#main p {
width: 100%; }
#main p .redbox {
background-color: #ff0000;}

（1.2.2偽類嵌套—引用父選擇器）
示例1：
a {
font-weight: bold;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
}
編譯為：
a {
font-weight: bold;}
a:hover {
text-decoration: underline; }
body.firefox a {font-weight: normal; }
注意：& 必須作為選擇器的第一個字符，其后可以跟隨后綴生成復合的選擇器。
示例2：
#main {
color: black;
&-sidebar { border: 1px solid; }
}
編譯為：
#main {
color: black; }
#main-sidebar {
border: 1px solid; }
示例3：
.clearfix{
&:before,
&:after {
content:"";
display: table;
}
編譯為：
clearfix:before, .clearfix:after {
content: “”;
display: table;
}

（1.2.3屬性嵌套）
.funky {
font: {
family: fantasy;
size: 30em;
}
}
編譯為：
.funky {
font-family: fantasy;
font-size: 30em; }

1.3混合宏
（1.3.1 聲明混合宏）
示例1：簡單的混合宏
聲明 名稱 參數
@mixin border-radius(KaTeX parse error: Expected '}', got 'EOF' at end of input: radius){ //(radius:5px)傳默認值
-webkit-border-radius: $radius;
border-radius: KaTeX parse error: Expected 'EOF', got '}' at position 9: radius; }? 示例2：復雜的混合宏 @mi…shadow…) { //多個參數用…表示
@if length($shadow) >= 1 {
@include prefixer(box-shadow, $shadow);
} @else{
$shadow:0 0 4px rgba(0,0,0,.3);
@include prefixer(box-shadow, $shadow);
}
}
（1.3.2 調用混合宏）
（其他樣式中調用混合宏）
無參或者含有默認參數時的調用：
button {
@include border-radius; //@include 名稱
}
傳參時的調用：
.box {
@include border-radius(3px); //調用并傳參
}
（混合宏內調用混合宏）
@mixin compound {
@include header-text;
}
@mixin 可以用 = 表示，而 @include 可以用 + 表示

1.4擴展/繼承
示例1：（普通樣式延伸）
.btn {
border: 1px solid #ccc;
padding: 6px 10px;
}
.btn-primary {
background-color: #f36;
@extend .btn;
}
編譯為：CSS
.btn, .btn-primary {
border: 1px solid #ccc;
padding: 6px 10px;
}
.btn-primary {
background-color: #f36;
}
示例2：（繼續延伸）
當一個選擇器延伸給第二個后，可以繼續將第二個選擇器延伸給第三個。
示例3：（選擇器列）
如 .foo .bar 或 .foo + .bar不可以延伸給其他元素，但是，卻可以將其他元素延伸給選擇器列。
#fake-links .link { //選擇器列
@extend a;}
a {
color: blue;
&:hover {
text-decoration: underline;}
}

編譯為：
a, #fake-links .link {
color: blue; }
a:hover, #fake-links .link:hover {
text-decoration: underline; }
示例4：（在 @media （或者其他 CSS 指令）中使用 @extend，必須延伸給相同指令層中的選擇器）

@media print {
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
}

1.5占位符選擇器 %foo（@extend-Only 選擇器）
%mt5 {
margin-top: 5px;
}
注意：這段代碼沒有被 @extend 調用，他并沒有產生任何代碼塊，只是靜靜的躺在你的某個 SCSS 文件中。
%mt5 {
margin-top: 5px;
}
.btn {
@extend %mt5;
}
編譯為：CSS
.btn {
margin-top: 5px;
}
注意：調用混合宏時，不能智能的將相同的樣式代碼塊合并在一起。可以傳參數
使用繼承/擴展時，可以將相同的樣式代碼塊合并在一起。 不能傳參數；不調用也編譯
使用占位符時，可以將相同的樣式代碼塊合并在一起。 和繼承基本相同；不調用不編譯

1.6插值語句#{}（通過 #{} 插值語句可以在選擇器或屬性名中使用變量）
示例1：
@mixin set-value($side, $value) {
@each $prop in KaTeX parse error: Expected '}', got '#' at position 22: …ties { #?{prop}-#{$side}: $value;
}
}
注意：混合宏（@mixin）不能用#{}插值。
@extend（繼承、占位符%） 中可以使用插值。

1.7注釋
（1.7.1）單行注釋//
（1.7.2）多行注釋/注釋的內容/
注意：多行注釋方式會在編譯出來的 CSS 顯示，單行注釋方式在編譯出來的 CSS 中不會顯示。
（1.7.3）多行注釋中輸出變量值：
KaTeX parse error: Expected 'EOF', got '#' at position 75: …mework version #?{version}. */

1.8數據類型
數字: 如，1、 2、 13、 10px；
字符串：有引號字符串或無引號字符串，如，“foo”、 ‘bar’、 baz；
顏色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；
布爾型：如，true、 false；
空值：如，null；
值列表：用空格或者逗號分開，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。

（1.8.1）字符串
有引號字符串 (quoted strings)，如 “Lucida Grande” 、‘http://sass-lang.com’；
無引號字符串 (unquoted strings)，如 sans-serifbold。
注意：使用 #{ }插值語句 (interpolation) 時，有引號字符串將被編譯為無引號字符串。

（1.8.2）列表（指 Sass 如何處理 CSS 中：margin: 10px 15px 0 0或font-face: Helvetica, Arial, sans-serif）
sass列表函數：
nth函數（nth function） 可以直接訪問值列表中的某一項；
join函數（join function） 可以將多個值列表連結在一起；
append函數（append function） 可以在值列表中添加值；
@each規則（@each rule） 則能夠給值列表中的每個項目添加樣式。
注意1：如果數組中包含空數組或空值，編譯時將被清除，比如 1px 2px () 3px 或 1px 2px null 3px。
注意2：例如 (1,) 表示只包含 1 的數組，而 (1 2 3,) 表示包含 1 2 3 這個以空格分隔的數組的數組。
（1.8.3）Maps
鍵值對的集合：如 (key1: value1, key2: value2)
（1）map-get函數用于查找鍵值；
（2）map-merge函數用于map和新加的鍵值融合；
（3）@each命令可添加樣式到一個map中的每個鍵值對。
注意： (key1: value1, key2: value2)會被List函數轉換為 key1 value1, key2 value2 ，反之則不能。

二、Sass的基本特性-運算
2.1加法
（2.1.1 變量加法）
$sidebar-width: 220px;
$content-width: 720px;
.container {
width: $sidebar-width + $content-width;
margin: 0 auto;
}
（2.1.2 屬性加法）（需要注意單位）
.box {
width: 20px + 8in; //in(英尺)
}

2.2減法
減法和加法運算類似，同樣需要注意單位。

2.3乘法
.box {
width: 10px * 2;
}
注意：只需要為一個數值提供單位即可。且在運算中有不同類型的單位時，也將會報錯。

2.4除法
（2.4.1）
.box {
width: (100px / 2);
}
注意：需要給運算的外面添加一個小括號( )。
（2.4.1）
.box {
width: 100px / 2 + 2in;
}
注意：“/”符號在已有的數學表達式中時，也會被認作除法符號。
（2.4.1）
$width: 1000px;
$nums: 10;
.item {
width: $width / 10; //width: $width / $nums;
}
注意：當用變量進行除法運算時，“/”符號也會自動被識別成除法。
綜合上述，”/ ”符號被當作除法運算符時有以下幾種情況：
? （2.4.1） 如果數值被圓括號包圍。
? （2.4.2） 如果數值是另一個數學表達式的一部分。
? （2.4.3）如果數值或它的任意部分是存儲在一個變量中或是函數的返回值。
注意：如果兩個值帶有相同的單位值時，除法運算之后會得到一個不帶單位的數值。

2.5顏色運算
（2.5.1 普通顏色值運算）
p {
color: #010203 + #040506; //color: #010203 * 2;
}
編譯為：
p {
color: #050709;
}
（2.5.2 顏色值包含 alpha channel（rgba 或 hsla 兩種顏色值））
p {
color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}
編譯為：
p {
color: rgba(255, 255, 0, 0.75); }
注意：必須擁有相等的 alpha 值才能進行運算，因為算術運算不會作用于 alpha 值。
（2.5.3 顏色值通過opacify 或 transparentize來改變透明度alpha）
KaTeX parse error: Expected '}', got 'EOF' at end of input: …color: opacify(translucent-red, 0.3);
background-color: transparentize($translucent-red, 0.25);
}
編譯為：
p {
color: rgba(255, 0, 0, 0.8);
background-color: rgba(255, 0, 0, 0.25); }
（2.5.4 顏色值格式修改–IE濾鏡）
$translucent-red: rgba(255, 0, 0, 0.5);
KaTeX parse error: Expected 'EOF', got '#' at position 8: green: #?00ff00; div { …green)}’, endColorstr=’#{ie-hex-str($translucent-red)}’);
}
編譯為：
div {
filter: progid:DXImageTransform.Microsoft.gradient(enabled=‘false’, startColorstr=#FF00FF00, endColorstr=#80FF0000);
}

2.6字符運算
（2.6.1 字符串連接）
KaTeX parse error: Expected '}', got '#' at position 61: …{ content: " #?{content} "; //content: " Hello Sass! ";
}
（2.6.2 直接通過 + 把字符連接）
div {
cursor: e + -resize; //cursor: e-resize;
}
（2.6.3 有引號字符 與 無引號字符 相連接）
p:before {
content: “Foo " + Bar; //有引號字符 + 無引號字符 = 有引號字符串
font-family: sans- + “serif”; //無引號字符 + 有引號字符 = 無引號字符串
}
編譯為：
p:before {
content: “Foo Bar”;
font-family: sans-serif; }
（2.6.4 在有引號的文本字符串中使用 #{} 插值語句可以添加動態的值）
KaTeX parse error: Expected '}', got '#' at position 65: …ontent: "I ate #?{value} pies!”; //content: “I ate 7px pies!”;
}

2.7關系運算
<, >, <=, >= 也可用于數字運算，相等運算 ==, != 可用于所有數據類型

2.8 布爾運算
and、or、 not 運算

2.9數組運算
數組不支持任何運算方式。

三、函數
（3.1 hsl）
p {
color: hsl(0, 100%, 50%);
}

編譯為
p {
color: #ff0000; }
（3.2 自定義函數）
$grid?width:40px;@functiongrid?width($n) {
@return $n * $grid-width;
}
#sidebar { width: grid-width(5); }

編譯為
#sidebar {
width: 200px; }

四、@-Rules 與指令
（4.1 @import：允許其導入 SCSS 或 Sass 文件）
示例：（導入單個文件）
@import “foo.scss”;

或
@import “foo”;
示例：（同時導入多個文件）
@import “rounded-corners”, “text-shadow”;
示例：（導入文件時用#{ } 插值語句）
KaTeX parse error: Expected '}', got 'EOF' at end of input: …/css?family=\#{family}");
注意：
在以下情況下，@import 僅作為普通的 CSS 語句，不會導入任何 Sass 文件。
文件拓展名是 .css；
文件名以 http:// 開頭；
文件名是 url()；
@import 包含 media queries
如果需要導入 SCSS 或者 Sass 文件，但又不希望將其編譯為 CSS，只需要在文件名前添加下劃線，這樣會告訴 Sass 不要編譯這些文件，但導入語句中卻不需要添加下劃線。
例如，將文件命名為 _colors.scss，便不會編譯 _colours.css 文件。
@import “colors”;

上面的例子，導入的其實是 _colors.scss 文件

（4.2 @media）
Sass 中 @media 指令與 CSS 中用法一樣，只是增加了一點額外的功能：允許其在 CSS 規則中嵌套。
示例1：（樣式中嵌套@media）
.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}

編譯為：
.sidebar {
width: 300px; }
@media screen and (orientation: landscape) {
.sidebar {
width: 500px; } }
示例2：（@media嵌套@media）
@media screen {
.sidebar {
@media (orientation: landscape) {
width: 500px;
}
}
}

編譯為
@media screen and (orientation: landscape) {
.sidebar {
width: 500px; } }
注意：@media 甚至可以使用 SassScript（比如變量，函數，以及運算符）代替條件的名稱或者值。

（4.3 @extend）
1.4擴展/繼承—有說明

（4.4 @at-root）
.parent {
…
@at-root {
.child1 { … }
.child2 { … }
}
.step-child { … }
}

編譯為:
.parent { … }
.child1 { … }
.child2 { … }
.parent .step-child { … }
在media之外/之內： @at-root (without: …) and @at-root (with: …)

（4.5 @debug）
@debug 10em + 12em;

編譯為
Line 1 DEBUG: 22em

（4.6 @warn）
@warn “Assuming #{$x} to be in pixels”;

（4.7 @error）
@error “KaTeX parse error: Expected 'EOF', got '#' at position 28: … unitless, was #?{x}.”;

五、控制指令
（5.1 if()）

（5.2 @if）
當 @if 的表達式返回值不是 false 或者 null 時，條件成立，輸出 {} 內的代碼：
p {
@if 1 + 1 == 2 { border: 1px solid; } //@if 5 < 3 或 @if null
}
注意：@if 聲明后面可以跟多個 @else if 聲明，或者一個 @else 聲明。

（5.3 @for）
兩種格式：
@for $var from through //左閉右閉區間
@for $var from to //左閉右開區間
區別：當使用 through 時，條件范圍包含 與 的值，而使用 to 時條件范圍只包含 的值不包含 的值。
注意： 和 必須是整數值。
示例：
@for KaTeX parse error: Expected '}', got '#' at position 30: …gh 3 { .item-#?{i} { width: 2em * $i; }
}

（5.4 @each）
格式: $var in , 是一連串的值，也就是值列表。
示例：（一個變量----一個值列表）
@each KaTeX parse error: Expected '}', got '#' at position 50: …alamander { .#?{animal}-icon {
background-image: url(’/images/#{$animal}.png’);
}
}
示例：（多個變量----多個值列表）
@each $animal, $color, KaTeX parse error: Expected '}', got '#' at position 156: …te, move) { .#?{animal}-icon {
background-image: url(’/images/#{$animal}.png’);
border: 2px solid $color;
cursor: $cursor;
}
}
示例3：（多個變量----對象）
@each $header, KaTeX parse error: Expected '}', got '#' at position 45: …h3: 1.2em) { #?{header} {
font-size: $size;
}
}

（5.5 @while）
示例：
$i: 6;
@while KaTeX parse error: Expected '}', got '#' at position 17: … > 0 { .item-#?{i} { width: 2em * $i; }
$i: $i - 2;
}

（5.6 @content）
示例：（向混合樣式中導入內容）
@mixin apply-to-ie6-only {

• html {
  @content; //導入的地方
  }
  }
  @include apply-to-ie6-only {
  #logo { //導入的內容
  background-image: url(/logo.gif);
  }
  }

編譯為

• html #logo {
  background-image: url(/logo.gif);
  }

（輸出方式：）
嵌套輸出方式編譯：sass --watch test.scss:test.css --style nested
展開輸出方式編譯：sass --watch test.scss:test.css --style expanded
緊湊輸出方式編譯：sass --watch test.scss:test.css --style compact //樣式都在一行
壓縮輸出方式編譯：sass --watch test.scss:test.css --style compressed //樣式壓縮

將.scss文件轉化的css代碼并保存到一個新文件中：
sass app.scss app.css

總結

以上是生活随笔為你收集整理的Sass笔记（CSS 的预编译语言）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。