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

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

在項(xiàng)目中還是引用“.css”文件，Sass 只不過(guò)是做為一個(gè)預(yù)處理工具：用SASS的格式寫(xiě)好樣式文件，編譯成為CSS文件，在項(xiàng)目中調(diào)用。

一、Sass的基本特性-基礎(chǔ)
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;//調(diào)用局部變量
}
}
（1.1.3）示例（全局變量–變量名：變量值 ！global）
$color:red!global;則表示在塊內(nèi)塊外都可以使用這個(gè)變量。（1.1.4）變量默認(rèn)值默認(rèn)變量：$baseLineHeight:1.5 !default;
覆蓋默認(rèn)變量：
只需要在默認(rèn)變量之前重新聲明下變量即可。
即：$baseLineHeight: 2;
$baseLineHeight:1.5!default;調(diào)用$baseLineHeight時(shí)，當(dāng)變量變量已經(jīng)被賦值，不會(huì)再被重新賦值；如果變量還沒(méi)有被賦值，則會(huì)被賦予新的值。
例子：
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
調(diào)用時(shí)變量值為2。
例子：
$baseLineHeight: null;
$baseLineHeight: 1.5 !default;
調(diào)用時(shí)變量值為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; }
注意：& 必須作為選擇器的第一個(gè)字符，其后可以跟隨后綴生成復(fù)合的選擇器。
示例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：簡(jiǎn)單的混合宏
聲明 名稱 參數(shù)
@mixin border-radius(KaTeX parse error: Expected '}', got 'EOF' at end of input: radius){ //(radius:5px)傳默認(rèn)值
-webkit-border-radius: $radius;
border-radius: KaTeX parse error: Expected 'EOF', got '}' at position 9: radius; }? 示例2：復(fù)雜的混合宏 @mi…shadow…) { //多個(gè)參數(shù)用…表示
@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 調(diào)用混合宏）
（其他樣式中調(diào)用混合宏）
無(wú)參或者含有默認(rèn)參數(shù)時(shí)的調(diào)用：
button {
@include border-radius; //@include 名稱
}
傳參時(shí)的調(diào)用：
.box {
@include border-radius(3px); //調(diào)用并傳參
}
（混合宏內(nèi)調(diào)用混合宏）
@mixin compound {
@include header-text;
}
@mixin 可以用 = 表示，而 @include 可以用 + 表示

1.4擴(kuò)展/繼承
示例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：（繼續(xù)延伸）
當(dāng)一個(gè)選擇器延伸給第二個(gè)后，可以繼續(xù)將第二個(gè)選擇器延伸給第三個(gè)。
示例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;
}
注意：這段代碼沒(méi)有被 @extend 調(diào)用，他并沒(méi)有產(chǎn)生任何代碼塊，只是靜靜的躺在你的某個(gè) SCSS 文件中。
%mt5 {
margin-top: 5px;
}
.btn {
@extend %mt5;
}
編譯為：CSS
.btn {
margin-top: 5px;
}
注意：調(diào)用混合宏時(shí)，不能智能的將相同的樣式代碼塊合并在一起。可以傳參數(shù)
使用繼承/擴(kuò)展時(shí)，可以將相同的樣式代碼塊合并在一起。 不能傳參數(shù)；不調(diào)用也編譯
使用占位符時(shí)，可以將相同的樣式代碼塊合并在一起。 和繼承基本相同；不調(diào)用不編譯

1.6插值語(yǔ)句#{}（通過(guò) #{} 插值語(yǔ)句可以在選擇器或?qū)傩悦惺褂米兞?#xff09;
示例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）多行注釋/注釋的內(nèi)容/
注意：多行注釋方式會(huì)在編譯出來(lái)的 CSS 顯示，單行注釋方式在編譯出來(lái)的 CSS 中不會(huì)顯示。
（1.7.3）多行注釋中輸出變量值：
KaTeX parse error: Expected 'EOF', got '#' at position 75: …mework version #?{version}. */

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

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

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

二、Sass的基本特性-運(yùn)算
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減法
減法和加法運(yùn)算類似，同樣需要注意單位。

2.3乘法
.box {
width: 10px * 2;
}
注意：只需要為一個(gè)數(shù)值提供單位即可。且在運(yùn)算中有不同類型的單位時(shí)，也將會(huì)報(bào)錯(cuò)。

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

2.5顏色運(yùn)算
（2.5.1 普通顏色值運(yùn)算）
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 值才能進(jìn)行運(yùn)算，因?yàn)樗阈g(shù)運(yùn)算不會(huì)作用于 alpha 值。
（2.5.3 顏色值通過(guò)opacify 或 transparentize來(lái)改變透明度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字符運(yùn)算
（2.6.1 字符串連接）
KaTeX parse error: Expected '}', got '#' at position 61: …{ content: " #?{content} "; //content: " Hello Sass! ";
}
（2.6.2 直接通過(guò) + 把字符連接）
div {
cursor: e + -resize; //cursor: e-resize;
}
（2.6.3 有引號(hào)字符 與 無(wú)引號(hào)字符 相連接）
p:before {
content: “Foo " + Bar; //有引號(hào)字符 + 無(wú)引號(hào)字符 = 有引號(hào)字符串
font-family: sans- + “serif”; //無(wú)引號(hào)字符 + 有引號(hào)字符 = 無(wú)引號(hào)字符串
}
編譯為：
p:before {
content: “Foo Bar”;
font-family: sans-serif; }
（2.6.4 在有引號(hào)的文本字符串中使用 #{} 插值語(yǔ)句可以添加動(dòng)態(tài)的值）
KaTeX parse error: Expected '}', got '#' at position 65: …ontent: "I ate #?{value} pies!”; //content: “I ate 7px pies!”;
}

2.7關(guān)系運(yùn)算
<, >, <=, >= 也可用于數(shù)字運(yùn)算，相等運(yùn)算 ==, != 可用于所有數(shù)據(jù)類型

2.8 布爾運(yùn)算
and、or、 not 運(yùn)算

2.9數(shù)組運(yùn)算
數(shù)組不支持任何運(yùn)算方式。

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

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

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

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

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

上面的例子，導(dǎo)入的其實(shí)是 _colors.scss 文件

（4.2 @media）
Sass 中 @media 指令與 CSS 中用法一樣，只是增加了一點(diǎn)額外的功能：允許其在 CSS 規(guī)則中嵌套。
示例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（比如變量，函數(shù)，以及運(yùn)算符）代替條件的名稱或者值。

（4.3 @extend）
1.4擴(kuò)展/繼承—有說(shuō)明

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

編譯為:
.parent { … }
.child1 { … }
.child2 { … }
.parent .step-child { … }
在media之外/之內(nèi)： @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）
當(dāng) @if 的表達(dá)式返回值不是 false 或者 null 時(shí)，條件成立，輸出 {} 內(nèi)的代碼：
p {
@if 1 + 1 == 2 { border: 1px solid; } //@if 5 < 3 或 @if null
}
注意：@if 聲明后面可以跟多個(gè) @else if 聲明，或者一個(gè) @else 聲明。

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

（5.4 @each）
格式: $var in , 是一連串的值，也就是值列表。
示例：（一個(gè)變量----一個(gè)值列表）
@each KaTeX parse error: Expected '}', got '#' at position 50: …alamander { .#?{animal}-icon {
background-image: url(’/images/#{$animal}.png’);
}
}
示例：（多個(gè)變量----多個(gè)值列表）
@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：（多個(gè)變量----對(duì)象）
@each $header, KaTeX parse error: Expected '}', got '#' at position 45: …h(huán)3: 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）
示例：（向混合樣式中導(dǎo)入內(nèi)容）
@mixin apply-to-ie6-only {

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

編譯為

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

（輸出方式：）
嵌套輸出方式編譯：sass --watch test.scss:test.css --style nested
展開(kāi)輸出方式編譯：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文件轉(zhuǎn)化的css代碼并保存到一個(gè)新文件中：
sass app.scss app.css

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。