1-3 Sass 和SCSS 有什麼區別？

文件擴展名不同，Sass 是以“.sass”後綴為擴展名，而SCSS 是以“.scss”後綴為擴展名 · 語法書寫方式不同，Sass是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而 ... SASS Introduction 第1章SASS簡介 1-1什麼是CSS預處理器？ 1-2什麼是Sass？ 1-3Sass和SCSS有什麼區別？ 1-4Sass/SCSS和純CSS寫法差很多嗎？ 第2章Sass安裝環境 2-1sass安裝（Mac系統）mv 2-2Sass安裝（windows版） 2-3查測Sass及更新 2-4卸載（刪除）Sass 第3章Sass的語法格式及編譯調試 3-1Sass語法格式 3-2Sass編譯 3-3[Sass]命令編譯 3-4[Sass]GUI界面工具編譯 3-5[Sass]自動化編譯 3-6[Sass]常見的編譯錯誤 3-7[Sass]不同樣式風格的輸出方法 3-8[Sass]嵌套輸出方式nested 3-9[Sass]展開輸出方式expanded 3-10[Sass]緊湊輸出方式compact 3-11[Sass]壓縮輸出方式compressed 3-12Sass的調試 第4章Sass的基本特性-基礎 4-1[Sass]聲明變量 4-2[Sass]普通變量與默認變量 4-3[Sass]變量的調用 4-4[Sass]局部變量和全局變量 4-5[Sass]嵌套-選擇器嵌套 4-6[Sass]嵌套-屬性嵌套 4-7[Sass]嵌套-偽類嵌套 4-8[Sass]混合宏-聲明混合宏 4-9[Sass]混合宏-調用混合宏 4-10[Sass]混合宏的參數--傳一個不帶值的參數 4-11[Sass]混合宏的參數--傳一個帶值的參數 4-12[Sass]混合宏的參數--傳多個參數 4-13[Sass]混合宏的參數--混合宏的不足 4-14[Sass]擴展/繼承 4-15[Sass]佔位符%placeholder 4-16[Sass]混合宏VS繼承VS佔位符 4-17[Sass]插值#{} 4-18[Sass]註釋 4-19[Sass]數據類型 4-20[Sass]字符串 4-21[Sass]值列表 第5章Sass的基本特性-運算 5-1[Sass運算]加法 5-2[Sass運算]減法 5-3[Sass運算]乘法 5-4[Sass運算]除法 5-5[Sass運算]變量計算 5-6[Sass運算]數字運算 5-7[Sass運算]顏色運算 5-8[Sass運算]字符運算 進階第1章Sass的控制命令 1-1Sass課程簡介 1-2@if 1-3@for循環（上） 1-4@for循環（下） 1-5@while循環 1-6@each循環 進階第2章Sass的函數功能-字符串與數字函數 2-1Sass的函數簡介 2-2字符串函數-unquote()函數 2-3字符串函數-quote()函數 2-4字符串函數-To-upper-case()、To-lower-case() 2-5數字函數簡介 2-6數字函數-percentage() 2-7數字函數-round()函數 2-8數字函數-ceil()函數 2-9數字函數-floor()函數 2-10數字函數-abs()函數 2-11數字函數-min()函數、max()函數 2-12數字函數-random()函數 進階第3章Sass的函數功能-列表函數 3-1列表函數簡介 3-2length()函數 3-3nth()函數 3-4join()函數 3-5append()函數 3-6zip()函數 3-7index()函數 3-8Introspection函數 3-9Introspection函數-type-of() 3-10unit()函數 3-11unitless()函數 3-12comparable()函數 3-13Miscellaneous函數 3-14地圖 3-15SassMaps的函數 3-16SassMaps的函數-map-get($map,$key) 3-17SassMaps的函數-map-has-key($map,$key) 3-18SassMaps的函數-map-keys($map) 3-19SassMaps的函數-map-values($map)、map-merge($map1,$map2) 3-20SassMaps的函數-map-remove($map,$key)、keywords($args) 進階第4章Sass的函數功能-顏色函數 4-1RGB顏色函數-RGB()顏色函數 4-2RGB顏色函數-RGBA()函數 4-3RGB顏色函數-Red()、Green()、Blue()函數 4-4RGB顏色函數-Mix()函數 4-5HSL函數簡介 4-6HSL函數-lighting（） 4-7HSL函數-saturate() 4-8HSL函數-adjust-hue()函數 4-9HSL函數-grayscale()函數 4-10Opacity函數簡介 4-11Opacity函數-alpha()、opacity()函數 4-12Opacity函數-rgba()函數 4-13Opacity函數-opacify()、fade-in()函數 4-14Opacity函數-transparentize()、fade-out()函數 4-15顏色函數實戰——七色卡 進階第5章Sass的@規則 5-1@import 5-2@media 5-3@extend 5-4@根 5-5@debug 5-6@warn 5-7@錯誤 PoweredbyGitBook 1-3Sass和SCSS有什麼區別？ Sass和SCSS有什麼區別？ Sass和SCSS其實是同一種東西，我們平時都稱之為Sass，兩者之間不同之處有以下兩點： 文件擴展名不同，Sass是以“.sass”後綴為擴展名，而SCSS是以“.scss”後綴為擴展名 語法書寫方式不同，Sass是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而SCSS的語法書寫和我們的CSS語法書寫方式非常類似。

先來看一個示例： Sass語法 $font-stack:Helvetica,sans-serif//定義變量 $primary-color:#333//定義變量 body font:100%$font-stack color:$primary-color SCSS語法 $font-stack:Helvetica,sans-serif; $primary-color:#333; body{ font:100%$font-stack; color:$primary-color; } 編譯出來的CSS body{ font:100%Helvetica,sans-serif; color:#333; } 提示：小伙伴們可以看出來，我們的右側代碼使用的是SCSS語法方式（我們的代碼編輯器不支持Sass語法方式噢！）。

任務 編寫第一個".scss"文件，在編輯器的第一行和第二行定義一個變量，並在body中調用對應變量來設置body大小尺寸？ body{width:200px;height:300px;} resultsmatching"" Noresultsmatching""