自學文件

scss 是 sass3的新版本，也是目前推薦的語法，以.scss結尾的檔案
所以 scss == sass3最新版本，目前就使用scss。

scss自學

scss引入其他檔案

1.引入其他 .scss 檔案

@import 'index.scss'  

這樣的話，檔案在編譯後，會自動把引入的檔案和當前檔案合併為一個.scss檔案

2.引入其他 .css 檔案

@import 'index.css'  

和引入.scss檔案不同，這樣引入的.css檔案在編譯後不會和當前檔案合併為一個.scss檔案，而是繼續保持為外鏈引入方式

scss註釋方法

scss的註釋有兩種

1.塊註釋
/*
*/
2.行註釋
//

scss變數

scss變數分為3種，以$符號開頭,後面緊跟變數名。變數名和變數值之間用冒號：分開

1.常規變數

$key: value;

2.預設變數

$key: value!default;

預設變數是可以被覆蓋的,具體覆蓋方法如下
$font: 12px;
$font: 14px!default;

3.特殊變數

$fontSize:14px;
font:#{$fontSize}

4.多值變數

多值變數分為list和map兩種型別，list類似於js的陣列，map類似於物件

巢狀

巢狀分為兩種：1.選擇器巢狀（目前經常使用的）、2.屬性巢狀：不經常使用
1. 選擇器巢狀

ul{
    li{
        a{

        }
    }
}

/*以上相當於*/  

ul{

}  
ul li {

}  
ul li a{

}

在屬性選擇器中，&表示父元素選擇器

a{
    &:hover{

    }
}
/*以上相當於*/
a{

}
a:hover{

}

1. 屬性巢狀

div{
    border{
        top:{
            width:1px;
        }
        left
 
:{
            width:2px;
        }
    }
}

/*以上相當於*/

div{
    border-top:1px;
    border-left:2px;
}

混合

@mixin 呼叫@mixin方法需要使用 @include

/*普通混合*/

@mixin font{
    line-height:10px;
    color: #fff;
}

.footer{
    @include font;
}

/*以上相當於*/

.footer{
    line-height: 10px;
    color: #fff;
}
/*帶引數混合*/

@mixin font($size:12px){  //這裡面的引數是預設的意思
    font-size: $size;
}

.footer{
    @include font(16px);
}

繼承

使用繼承會讓該選擇器繼承指定選擇器的所有樣式,要使用關鍵詞@extend，後面跟上指定的選擇器

.font{
    font-size:14px;
    height: 16px;
}
.footer{
    @extend .font;
    border-width: 2px;
}

/*以上相當於*/

.font, .footer{
    font-size:14px;
    height: 16px;
}
.footer{
    border-width: 2px;
}

站位選擇器

%選擇器名，通過@extend 去呼叫，如果不呼叫，則檔案編譯後不會出現改該冗餘css檔案

%dir{
    font-size: 14px;
}
%clear{
    overflow: hidden;
}
div{
    @extend %dir;
}

/*只有 %dir 選擇器被呼叫了，%clear 在編譯的時候會被當做冗餘檔案給過濾掉，不會出現在編譯後的.css檔案中*/

函式

sass 內建了很多函式，自己也可以定義函式。以 @function 開始 @return 返回值

@function per(data){
    @return data/10px;
}

div{
    font-size: per(140px);
}

/*以上等價於*/
div{
    font-size: 14px;
}

其他功能

其他功能包括以下幾點

1. 運算：對於（數字，顏色，變數）的四則（加減乘除）運算,運算子前後各保留一格空格
2. if判斷：@if可以單獨使用，也可以配合@else、@else if 一起使用
3. 三目運算子：if(true,1px,2px)，返回的值是1px,if(false,1px,2px),返回的值是2px
4. for迴圈，共有兩種寫法，1：@for varfromthrough2：@for$varfromthrough2：@for$var from to 。兩種寫法唯一的區別就是，through包括end這個數，to不包括end這個數。
5. each迴圈，@each $var in ,list和map分別表示為list和map型別資料。