Sass、Scss孽锥、Css關(guān)系介紹

• Sass是基于ruby的一種CSS預(yù)處理語言（可以理解成一種能生成CSS，而且語法更強(qiáng)大的語言）导而，相比CSS忱叭，里面多了變量隔崎、函數(shù)等特性今艺，更加方便了CSS樣式的開發(fā)，但是由于其語法和ruby靠攏爵卒，因此在語法上和CSS也有一定的差異虚缎，為了兼容CSS，在Sass發(fā)展到3.0版本以后就推出了Scss，所以Scss就是3.0+版本的Sass实牡，其中Sass文件后綴名為.sass陌僵、Scss文件后綴名為.scss
• Scss在語法上完全兼容CSS，因此你甚至可以直接將現(xiàn)有的CSS文件后綴名改成.scss就是一個Scss文件创坞，CSS和Scss就像是C和C++的關(guān)系碗短，后者語法上完全兼容前者，是前者的升級版题涨，因此現(xiàn)在Scss越來越被廣泛應(yīng)用
• 本文介紹的就是3.0+版本的Sass偎谁，即Scss

安裝

1. 由于Sass基于ruby語言，因此首先要安裝ruby纲堵，參考：
   https://jingyan.baidu.com/article/5553fa827b5d7d65a23934ba.html
2. 安裝完成后在命令行輸入命令：

gem install sass

交互式命令行

如果想要測試sass代碼是否正確巡雨，可以通過命令：sass -i打開sass的交互式命令行，舉例：

>sass -i
>> $a:#ffffff
#ffffff

命令行編譯

一般編譯時輸入以下命令即可：

sass  scss文件名:輸出的css文件名 

如果希望scss文件修改時自動編譯席函，則輸入以下命令：

sass  --watch sass:css

編譯模式

編譯模式有分4中铐望，分別是：

• nested：默認(rèn)模型，花括號的收尾在最后一個樣式后面茂附，emmm...感覺作為默認(rèn)格式有點不太習(xí)慣正蛙，可以看下面的例子：

// 命令：sass xxx.scss yyy.css ... --style nested
ul {
  background: black; }
ul li {
  font-size: 10px; }

• expanded：擴(kuò)展模式，花括號放在最后一個樣式的下一行营曼，感覺比較符合自己的風(fēng)格跟畅，舉例：

ul {
  background: black;
}
ul li {
  font-size: 10px;
}

• compact：樣式控制在一行內(nèi)，舉例：

ul { background: black; }
ul li { font-size: 10px; }

• compressed：壓縮溶推，舉例：

ul{background:black}ul li{font-size:10px}

監(jiān)聽示例

sass --watch ./scss:./css --style expanded --sourcemap=none --no-cache
/** 監(jiān)聽scss文件夾下的內(nèi)容并映射到css文件夾下徊件，使用expanded模式編譯，并且不生成map和緩存文件 **/

Sass特性

注釋

有三種：

• 單行注釋：// 注釋蒜危，編譯之后不會出現(xiàn)在CSS文件中
• 多行注釋：編譯之后會在CSS文件中保留（壓縮模式下則不保留）虱痕，格式：

/*
 * xxx
 * xxx
*/

• 強(qiáng)制注釋：相比多行注釋，注釋內(nèi)容一定會在CSS文件中保留辐赞，格式：

/*!
 * xxx
 * xxx
*/

變量

在Sass中可以定義變量部翘，以供后面使用，定義的變量前面加上$符號响委，舉例：

$my-color: #ffffff;
ul {
    background: $my-color;
}

變量里還可以引用變量新思，舉例：

$my-color:#aaaaaa;
$my-style:$my-color;
ul {
    background: $my-style;
}

interpolation

通過語法#{變量}，可以在文件的各處引用這個變量赘风，即使是注釋里也可以夹囚！舉例：

$version: 0.1;
$color: red;
$css:head;
/* 
 * 當(dāng)前版本為：#{$version}
*/
.style-#{$css} {
    background: #{$color}
}

編譯結(jié)果為：

@charset "UTF-8";
/* 
 * 當(dāng)前版本為：0.1
*/
.style-head {
  background: red;
}

數(shù)據(jù)類型

number

數(shù)字，包括普通的數(shù)字還有一些加上單位的數(shù)字邀窃，比如在sass交互式命令行下輸入下面語句：

>> type-of(1)
"number"
>> type-of(1px)
"number"
>> type-of(1%)
"number"

數(shù)字類型支持基本的加減乘除運(yùn)算荸哟，舉例：

>> 1+1
2
>> 2-1
1
>> 2*2
4
>> 2/1
2/1
// 默認(rèn)除法結(jié)果按算式結(jié)果顯示，如果希望以數(shù)字顯示，則外面加個括號
>> (2/1)
2
>> 1px+2
3px
// 帶單位也可以運(yùn)算鞍历，但不能是單位不同的舵抹，如果只有一個帶單位了，則按這個單位計算
>> 1px * 2px
2px*px
// 要注意單位也會參與到計算當(dāng)中劣砍，所以不建議這樣計算
>> 1px * 2
2px
>> (1px / 2px)
0.5
>> (1px / 2)
0.5px

string

字符串惧蛹，用單引號或者雙引號包起來，也可以不用引號包起來刑枝，但是不帶引號的話赊淑，里面無法加空格，舉例：

>> type-of('a')
"string"
>> type-of("a")
"string"
>> type-of(a)
"string"
>> type-of("a a")
"string"
// 加引號可以有空格
>> type-of(a a)
"list"
// 不加引號仅讽，中間空格會被當(dāng)做分隔符陶缺，結(jié)果變成列表
>> type-of(black)
"color"
// 要注意有些名字已經(jīng)被注冊成內(nèi)置的顏色類型數(shù)據(jù)

字符串可以通過+號進(jìn)行拼接，而如-//這樣的符號洁灵，則會被直接拼接饱岸，但是用*號則會報錯，舉例：

>> a+a
"aa"
>> a-a
"a-a"
>> a/a
"a/a"
>> a*a
SyntaxError: Undefined operation: "a times a".

bool

布爾型徽千，有true和false苫费，舉例：

>> type-of(1>2)
"bool"
>> 1 > 2
false

一般布爾型是結(jié)果邏輯運(yùn)算符操作的，常用的邏輯運(yùn)算符有>/</==/and/or/not

list

列表双抽，一組用空格百框、逗號或者是括號隔開的數(shù)據(jù)，舉例：

>> type-of(1px solid #fff)
"list"
>> 1 2
(1 2)
>> 1, 2
(1, 2)
>> 1 2, 3 4
((1 2), (3 4))
>> (1 2)(3 4)
((1 2) (3 4))

map

就是鍵值對牍汹，舉例：

>> (a:1,b:2)
(a: 1, b: 2)

color

顏色铐维，一般是#號開頭，或者一些內(nèi)置顏色慎菲，又或者一些能生成色彩的函數(shù)嫁蛇，舉例：

>> type-of(#fff)
"color"
>> type-of(black)
"color"
>> type-of(rgba(255, 255, 255, 0.1))
"color"
>> type-of(darken(#fff, 0.1))
"color"

注：
可以通過type-of()函數(shù)查看數(shù)據(jù)類型

函數(shù)

Sass當(dāng)中可以使用函數(shù)來實現(xiàn)各種功能

內(nèi)置函數(shù)

為了方便操作數(shù)據(jù)，Sass中內(nèi)置了很多函數(shù)露该，常用的列舉如下：

• abs：對數(shù)字取絕對值睬棚，舉例：

>> abs(-1)
1

• round：對數(shù)字進(jìn)行四舍五入
• ceil：對數(shù)字進(jìn)行向上取整
• floor：對數(shù)字進(jìn)行向下取整
• percentage：將數(shù)字轉(zhuǎn)換成百分?jǐn)?shù)
• max/min：取一組數(shù)字的最大/最小值，舉例：

>> max(1, 2, 3)
3

• to-upper-case/to-lower-case：將字符串中字母全部轉(zhuǎn)成大寫/小寫
• str-length：返回字符串的長度
• str-index：獲取字符串a(chǎn)在字符串b中的索引（Sass中索引從1開始）解幼，不存在則返回null抑党，舉例：

>> str-index(abc, b)
2
>> str-index(abc, d)
null

• str-insert：往字符串中插入字符串，舉例：

>> str-insert(abce, d, 4)
"abcde"

• not：對布爾值取反（參數(shù)也不一定要是布爾型）撵摆，返回布爾值
• length：獲取列表或者map的長度
• nth：返回列表索引對應(yīng)的值底靠，舉例：

>> nth(1px 2px 3px, 2)
2px

• index：返回列表某值對應(yīng)的索引，舉例：

>> index(1px 2px 3px, 2px)
2

• append：往列表后面添加內(nèi)容
• join：將列表合并成一個列表（可以用space-空格台汇、comma-逗號拼接）苛骨，舉例：

>> join(1 2, 3 4, comma)
(1, 2, 3, 4)

• map-get：根據(jù)鍵獲取map中對應(yīng)的值
• map-keys/map-values：獲取map中所有的鍵/值
• map-has-key：判斷map中時候含有某個鍵篱瞎，舉例：

>> $s:(a:1,b:2)
(a: 1, b: 2)
>> map-has-key($s, a)
true

• map-merge：合并map
• map-remove：刪除map中的對應(yīng)鍵值對苟呐，舉例：

>> map-remove($s, a, b)
()
// 刪除map中的鍵a和b

自定義函數(shù)

通過@function指令來定義函數(shù)痒芝，通過@return來指定返回值，舉例：

$i: 5;
$j: 5;
@function add($x, $y){
    @return $x + $y;
}
.style {
    col {
        width: add($i, $j);
    }
}

編譯結(jié)果為：

.style col {
  width: 10;
}

嵌套選擇器

舉例：

ul {
    background: black;
    li {
        font-size: 10px;
    }
}

編譯后的CSS代碼為：

ul {
    background: black;
}

ul li {
    font-size: 10px;
}

嵌套時調(diào)用父選擇器

對于偽類（如：:hover/:visited等）如果直接像前面那樣嵌套牵素，那么編譯后可能結(jié)果和我們想象的不一樣严衬，例如下面的代碼：

a {
    :hover {
        background: black;
    }
}

編譯后的結(jié)果如下：

a :hover {
  background: black;
}

那么此時由于a和:hover之間存在著空格，而被分析成兩個選擇器笆呆，結(jié)果導(dǎo)致樣式不起作用请琳。因此為了能夠調(diào)用父類和當(dāng)前嵌套的內(nèi)容結(jié)合，可以使用與符號&赠幕，舉例：

a {
    &:hover {
        background: black;
    }
}

編譯結(jié)果為：

a:hover {
  background: black;
}

注：
&符號實際上就是相當(dāng)于一個存放父類的變量俄精，比如看下面的例子：

a {
    & &:hover {
        background: black;
    }
}

編譯結(jié)果為：

a a:hover {
  // 可以發(fā)現(xiàn)&符號都被替換成了父類
  background: black;
}

嵌套屬性

不止是選擇器，屬性也可以被嵌套榕堰，比如：margin-top/margin-bottom/margin-left/margin-right都可以看做是margin下的屬性竖慧，但為了和選擇器區(qū)分開來，嵌套時需要加個冒號:逆屡，舉例：

div {
    margin: {
        top: 10px;
        bottom: 10px;
        left: 15px;
        right: 15px;
    }
}

編譯結(jié)果為：

div {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 15px;
  margin-right: 15px;
}

指令

Sass中提供了很多以@開頭并且能夠?qū)崿F(xiàn)各種功能的指令圾旨，包括前面的函數(shù)@function就是其中一種

判斷

通過@if、@else if和@else實現(xiàn)魏蔗，舉例：

$theme: dark;
.style {
    @if $theme == dark {
        background: black;
    } @else if $theme == light {
        background: white;
    } @else {
        background: red;
    }
}

循環(huán)

有for砍的、while還有each三種循環(huán)方式

• for循環(huán)

通過@for $var from 開始值 through/to 結(jié)束值實現(xiàn)，其中through會在最后一次$var == 結(jié)束值的時候執(zhí)行莺治，而to則不會在最后一次執(zhí)行廓鞠，舉例：

$times: 4;
.style1 {
    @for $i from 1 to $times{
        col-#{$i} {
            width: percentage(0.25* $i);
        }
    }
}

.style2 {
    @for $i from 1 through $times{
        col-#{$i} {
            width: percentage(0.25* $i);
        }
    }
}

編譯結(jié)果為：

.style1 col-1 {
  width: 25%;
}
.style1 col-2 {
  width: 50%;
}
.style1 col-3 {
  width: 75%;
}

.style2 col-1 {
  width: 25%;
}
.style2 col-2 {
  width: 50%;
}
.style2 col-3 {
  width: 75%;
}
.style2 col-4 {
  width: 100%;
}

• while循環(huán)

通過@while實現(xiàn)，舉例：

$i: 5;
.style {
    @while $i > 0 {
        col-#{$i} {
            width: $i + px;
        }
        $i: $i - 1;
    }
}

• each循環(huán)

主要在遍歷列表的時候使用谣旁，通過@each $var in $list實現(xiàn)诫惭，舉例：

$types: success warning error;
.style {
    @each $type in $types{
        style-#{$type} {
            background-image: url('./img/#{$type}.jpg');
        }
    }
}

樣式組

通過@mixin指令可以定義一個樣式組，然后在別的地方通過@include 樣式組名導(dǎo)入這個樣式組蔓挖，舉例：

@mixin my_style {
    div {
        background: black;
        a {
            font-size: 15px;
        }
    }
}

.my {
    @include my_style;
}

編譯結(jié)果：

.my div {
  background: black;
}
.my div a {
  font-size: 15px;
}

通過@mixin指令定義樣式組時還可以傳入?yún)?shù)夕土，舉例：

$my_color: black;
@mixin my_style($color, $size) {
    // 定義參數(shù)
    div {
        background: $color;
        a {
            font-size: $size;
        }
    }
}

.my {
    @include my_style($my_color, 15px);
    // 傳入?yún)?shù)
}

編譯結(jié)果和之前相同

繼承樣式

使用@extend指令可以繼承其他選擇器的樣式，舉例：

.style1 {
    background: black;
}

.style2 {
    @extend .style1;
    font-size: 15px;
}

編譯結(jié)果：

.style1, .style2 {
  background: black;
}

.style2 {
  font-size: 15px;
}

輸出警告或錯誤

通過@warn/@error可以輸出警告或者錯誤瘟判，警告舉例：

@warn "這是一個警告怨绣！"

結(jié)果可以看到命令行打印如下：

WARNING: 這是一個警告！
         on line 1 of test.scss

錯誤舉例：

@error "這是一個錯誤拷获！"

結(jié)果可以看到命令行打印如下：

>>> Change detected to: test.scss
      error test.scss (Line 1: 這是一個錯誤篮撑！)

警告和錯誤的區(qū)別就在于警告會進(jìn)行提示，但不影響后續(xù)的編譯操作匆瓜，而錯誤則在提示后停止編譯

模塊化開發(fā)

Sass之所以變得越來越流行還有個原因就是能夠很好地配合如今前端模塊化開發(fā)的趨勢赢笨，在Sass中可以把樣式分成好幾個模塊（稱作Partials未蝌，即各個小部分，是一堆.scss文件茧妒，并且文件名以_開頭萧吠，只作為引用模塊，不會被編譯）桐筏，然后通過@import指令導(dǎo)入纸型，并且和CSS的@import不同，CSS當(dāng)中導(dǎo)入樣式將會發(fā)起一個http請求梅忌，相當(dāng)消耗資源狰腌，而這里則是在編譯時引入需要的模塊，合并成一個文件而已

使用舉例：

./part/_main.scss文件

.style1 {
    background: black;
}
$theme-color: #ffffff;

導(dǎo)入文件

@import "./part/main";

.style2 {
    @extend .style1;
    font-size: 15px;
}
.style3 {
    background: $theme-color;
}

編譯結(jié)果

.style1, .style2 {
  background: black;
}

.style2 {
  font-size: 15px;
}

.style3 {
  background: #ffffff;
}

導(dǎo)出至JS參考

scss導(dǎo)出樣式：

:export {
  theme_color: #ffffff;
}

js中引入：

<script>
import { theme_color } from "xxx.scss";
export default {
  data() {
    return {
      theme_color: theme_color
    };
  }
};
</script>

常見問題

中文編譯錯誤

參考：https://www.cnblogs.com/cc11001100/p/5944794.html