# Sass/Scss
> [name=Chenkol_baby]
> [time=Wed, Sep 16, 2020]
> [Jack Hu](https://github.com/gn0262487838)

### Quick Start

1. install by npm

npm i -g sass

2. create fileName.scss

touch input.scss

3. hot reloading

sass --watch input.scss output.css

### Basic Scss

#### Variable

> 變數：宣告並指派

$styleName: #ffccff;

> 引用變數

body {
    background-color: $styleName;
}

#### Function

> 函式：宣告並建立

@function functionName($params1, $params2, ...) {
    $result: 0;
    $result: $params1 + $params2; 
    @return $result;
}

> 引用函式

main {
    padding: 0 0 0 functionName(1,2);
}

> Mixin

@mixin functionName($params1, $params2: 1) {
    weight: $params1;
    height: $params2;
    
    @if $params2 == 0 {
        overflow: hidden;
    }
}

.body {
    @include functionName(100px, 0);
}

* 思考：函式比較有什麼差別？

#### Extend

> 宣告及建立

%assembleName {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
}

> 引用

.test1 {
    @extend %assembleName;
    color: #ffccff;
}

.test2 {
    @extend %assembleName;
    border: 1px solid #ccffcc;
}

* 思考：是否像程式語言中繼承的概念？
* 比較：與Mixin的差別(提示，請觀察他們輸出的結果)？

#### Nest

> Scss 寫法

body {
    &:hover {
        css...
    }
}

body {
    main {
        css...
    }
}

> css 對應情況

body:hover {
    css...
}

body main {
    css...
}

### 參考
[Sass](https://sass-lang.com/documentation)

###### tags: `SASS/SCSS` `CSS`

###