SCSS 基本內容

SCSS 變數

使用 $ 開頭，後方再放入所要設定的參數值就可以了。
$變數名稱: 值;

$color: red;
$size: 20px;

變數可以使用運算

font-size: $size*2
margin: $size*0.5 $size

SCSS 巢狀結構(Nesting)

透過巢狀結構可以清楚的知道元素上下層的關係。

.container{
    max-width: 1280px;
    margin: 0 auto;
    .post{
        border: solid 1px #333;
    }
}

SCSS 函式 Mixins

將重複性的工作使用@mixin蒐集好後，利用@include帶入。
SCSS 的函示 還可以帶入參數。

//建立
@mixin + 名稱({語法內容}； 
//插入
@include + 名稱；

建立 @mixin 語法庫

//建立 ul 語法庫，套用在 ul 上
@mixin ul-flex{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

使用 @include 引入

ul{
    @include ul-flex;
}

@mixin + 變數

@mixin 名稱後面，加上小括弧並含變數，裡面的css值套用變數名稱

@mixin size($w,$h,$bgc){
    width: $w;
    height: $h;
    background-color: $bgc;
}

.box{
    @include size(50px,100px,#555)
}

@mixin + @media 響應式網頁

在修改時不需要修改很多地放，這種方法可以幫助我們簡化流程。
不同的是:
@mixin在大括號式寫組合語法。
@media大括弧中內容不能向寫組合語法一樣同個模板，會依地方不同而不一樣。
所以可以再@media內加上@content。
先定義好每個視窗時的大小，裡面的內容可以等到引入時寫。

//eg:
@mixin pad{
    media(max-width: 768px){
        @content
    }
}

.header{
    font-size: 25px;
    @include pad{
        font-size: 40px;
    }
}
.footer{
    font-size: 25px;
    @include pad{
        font-size: 50px;
    }
}

SCSS @import

@import(匯入)方便我們管理多個SCSS檔案，當css東西愈來越多，我們可以先將檔案依功能(eg:@media)或頁面分成一個一個小檔案。在使用@import統整式all.scss。

//分成小檔案的檔名注意，前面要加上底線
_media.scss
_variables.scss
_reset.scss
_mixin.scss

//導入 all.scss
@import "media"
@import " variable"
@import "reset"
@import "mixin"