---
# System prepended metadata

title: Sass/Scss
tags: [CSS, SASS/SCSS]

---

# 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`

### 




