# mission_34_sass_restaurant

練習使用sass技巧，手刻一個由sass編製合成的餐廳網站

- 成品畫面


- [成品網址](https://chrislinlin.github.io/my-projects/mentor_mission/mission_34/index.html?)

## HTML
### nav
- 漢堡表單
- 使用input標籤，input 標籤有一個html `hidden`屬性，可以讓標籤隱藏，直到被呼喚或是使用js使標籤出現。
[hidden小科普](https://www.w3school.com.cn/tags/att_global_hidden.asp)
- label `for`屬性 與表單控制元件的id屬性相同，使在點擊時會處發效果。

## sass
- 組合技 ==&==
再介紹本次任務的sass之前，想要先介紹一下組合計，再html結構中，設定容器a包覆容器b時，在容器a的class名稱設定aaa，容器b的class名稱設定aaa-bbb，在我們建立sass時可以使用『＆』減少填寫class次數。
假設有個容器aaa報覆著兩個子容器bbb及ccc

  <div class="aaa">
    <div class="aaa-bbb">
      <div class="aaa-bbb-ccc">
        這是一個abc容器
      </div>
    </div>
  </div>

在以前傳統css，假若要設定三個容器各別的屬性，我們必須分開表示

    .aaa {
      width: 300px;
      height: 300px;
      background-color: red;
    }

    .aaa-bbb {
      width: 200px;
      height: 200px;
      background-color: blue;
    }

    .aaa-bbb-ccc {
      width: 100px;
      height: 100px;
      background-color: yellow;
    }

不過在sass我們可以透過組合技達成一樣的效果，減少填寫屬性名稱次數

.aaa{
    width:300px;
    height:300px;
    background-color: red;
    &-bbb{
    width: 200px;
    height: 200px;
    background-color: blue; 
        &-ccc{
        width: 100px;
        height: 100px;
        background-color: yellow; 
        }
    }

}

### _base.scss
- 設定好顏色變數，方便取用
- 使用 @mixin 方式，設定要重複的使用的css及參數，放在 { }裡，等需要使用時使用`@include`重複呼叫。
- ％（placeholders)
這個方式與一般給class定義樣式，但需與 `@extend`一同使用。
- 完整_base.scss程式碼

 $color-dark: #262626;
$color-black: #000;
$color-primary: #d3ab55;
$color-secondary: #bbb;
$color-white: #fff;

$font-dancingScript: 'Dancing Script', cursive;
$font-josefinSans: 'Josefin Sans', sans-serif;
$font-nunito: 'Nunito', sans-serif;

@mixin flexLayout {
    display: flex;
    justify-content: center;
    align-items: center;
}

@mixin textStyles($transform: uppercase) {
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: $transform;
}

@mixin centering($topValue) {
    position: absolute;
    top: $topValue;
    left: 50%;
    transform: translate(-50%, -50%);
}

%fullSpace {
    width: 100%;
    height: 100%;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: $color-dark;
}

### _components
- 漢堡表單
- 原本的漢堡容器樣式為三條線，裝在一個容器裡，
- 點擊後畫面由左右兩邊展現navbar內容，漢堡容器內容三條線先便直線，再變成Ｘ，
- navbar內容，原先設定`left:-50vw`，是在視頻外的，利用`checked`屬性，改變left，展示內容。
- `X`這裡使用`transform-origin`設定好 圓心。
[transfrom-origin小科普](https://developer.mozilla.org/zh-TW/docs/Web/CSS/transform-origin)
- _layout.scss中已經有設定好，點擊改變漢堡中三條線的css，

//線一往左轉40度
.checkbox:checked~.hamburger-menu .menu-line-1 {
    transform: rotateZ(-40deg);
}
//線二不見
.checkbox:checked~.hamburger-menu .menu-line-2 {
    opacity: 0;
}
//線三往右轉40度
.checkbox:checked~.hamburger-menu .menu-line-3 {
    transform: rotateZ(40deg);
}

- 再次點擊，屏幕收回left設定改變，又會變回漢堡狀。

.hamburger-menu {
    width: 40px;
    height: 40px;
    position: fixed;
    top: 10%;
    right: 5%;
    z-index: 300;
    
    @media(max-width: 800px) {
        width: 35px;
        height: 35px;
    }
    
    @media(max-width: 500px) {
        width: 25px;
        height: 25px;
    }
    
    .menu {
        @extend %fullSpace;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        cursor: pointer;
        transition: transform .5s;
        
        &-line {
            width: 100%;
            height: 4px;
            // 改變兩直線旋轉的圓心，讓兩條直線變成x
            // 這邊設計為右邊直線的底端固定，並且作旋轉
            background-color: $color-primary;
            transform-origin: right;
            transition: all .5s .5s;
            
            @media(max-width: 800px) {
                height: 3px;
            }
            
            @media(max-width: 500px) {
                height: 2px;
            }
        }
    }
}

.logo {
    font-size: 70px;
    color: $color-primary;
    width: 110px;
    height: 110px;
    border: 3px solid $color-primary;
    border-radius: 50%;
    margin-right: 20px;
    text-decoration: none;
    @include flexLayout;
    
    @media(max-width: 1000px) {
        font-size: 50px;
        width: 90px;
        height: 90px;
    }
    
    @media(max-width: 500px) {
        height: 50px;
        width: 50px;
        font-size: 30px;
        border-width: 2px;
    }
}

.main-name {
    font-family: $font-nunito;
    font-size: 50px;
    color: $color-secondary;
    @include textStyles;
    
    @media(max-width: 1000px) {
        font-size: 40px;
    }
    
    @media(max-width: 500px) {
        font-size: 20px;
        text-align: center;
    }
}

.sub-name {
    font-family: $font-josefinSans;
    font-size: 18px;
    color: $color-secondary;
    text-align: center;
    @include textStyles;
    
    @media(max-width: 500px) {
        font-size: 12px;
        text-align: center;
    }
}

.main-heading {
    font-family: $font-dancingScript;
    font-size: 100px;
    font-weight: 300;
    color: $color-primary;
    margin-bottom: 40px;
    
    @media(max-width: 1600px) {
        font-size: 80px;
    }
    
    @media(max-width: 1000px) {
        font-size: 60px;
    }
    
    @media(max-width: 500px) {
        font-size: 40px;
        margin-bottom: 20px;
    }
}

.sub-heading {
    font-family: $font-josefinSans;
    font-size: 60px;
    font-weight: 300;
    color: $color-secondary;
    margin-bottom: 80px;
    text-align: center;
    
    @media(max-width: 1600px) {
        font-size: 50px;
        margin-bottom: 50px;
    }
    
    @media(max-width: 1300px) {
        font-size: 40px;
        margin-bottom: 30px;
    }
    
    @media(max-width: 1000px) {
        font-size: 30px;
    }
    
    @media(max-width: 500px) {
        font-size: 20px;
        margin-bottom: 10px;
    }
}

.main-btn {
    width: 170px;
    height: 45px;
    font-family: $font-josefinSans;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: $color-primary;
    background-color: transparent;
    border: 1px solid $color-primary;
    outline: none;
    cursor: pointer;
    transition: all .4s;
    
    &:hover {
        background-color: $color-primary;
        color: $color-dark;
    }
    
    @media(max-width: 800px) {
        width: 150px;
        height: 35px;
        font-size: 12px;
    }
    
    @media(max-width: 500px) {
        width: 130px;
        height: 30px;
        font-size: 10px;
    }
}

.card {
    width: 33.3333%;
    height: 30vw;
    position: relative;
    overflow: hidden;
    
    &:hover .card-overlay {
        left: 0;
    }
    
    &-overlay {
        position: absolute;
        top: 0;
        left: -100%;
        background-color: rgba($color-primary, .6);
        color: $color-white;
        z-index: 10;
        @include flexLayout;
        flex-direction: column;
        @extend %fullSpace;
        transition: left .7s;
        
        &-heading {
            font-family: $font-nunito;
            font-size: 50px;
            @include textStyles(capitalize);
            
            @media(max-width: 900px) {
                font-size: 35px;
            }
            
            @media(max-width: 650px) {
                font-size: 25px;
            }
            
            @media(max-width: 500px) {
                display: none;
            }
        }
        
        &-paragraph {
            font-family: $font-josefinSans;
            font-size: 30px;
            margin-bottom: 30px;
            @include textStyles(capitalize);
            
            @media(max-width: 900px) {
                font-size: 20px;
            }
            
            @media(max-width: 650px) {
                font-size: 15px;
            }
            
            @media(max-width: 500px) {
                display: none;
            }
        }
        
        &-btn {
            width: 150px;
            height: 40px;
            color: $color-primary;
            background-color: $color-white;
            font-family: $font-josefinSans;
            font-size: 14px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            border: 1px solid $color-primary;
            border-radius: 30px;
            outline: none;
            cursor: pointer;
            
            @media(max-width: 900px) {
                font-size: 12px;
                width: 130px;
                height: 30px;
            } 
            @media(max-width: 650px) {
                font-size: 10px;
                width: 100px;
                height: 30px;
            }
        }
    }
    
    &-img {
        @extend %fullSpace;
        object-fit: cover;
        opacity: .5;
    }
}

### _layout.scss
設定navbar/ header/ about-us/ gallery/ footer五大項目的css及RWD，使用`@include`調用再_base已設定好的css項目。
- gallery
html內容為六張介紹圖片，利用`display:flex`使其橫排，再利用`flex-warp`讓圖片變成兩排，每排三張圖片。

###### tags: `sass`