---
tags: 2021 程式體驗營
---
# 6/24 每日任務 Day14
{%hackmd theme-dark %}
## HTML 任務題目

今天進入 Sass 變數 的影片章節(顏色加深、加亮的部分會放到明天)
這邊要請同學練習使用 Sass 中的連結符號 `&`，
還有練習使用變數搭配加減乘除的方式來減少代碼的重複性，
請同學嘗試將[範例檔案](https://codepen.io/WangShuan/pen/GRWLbYp?editors=1100)中的樣式改寫成 scss 或 sass 的格式，
改寫前與改寫後的畫面需一致，且同學只能修改 CSS 的區塊，
最後將改寫完的 codepen 連結貼到下方的作業回報區即算完成。

方向參考：
1. 請把樣式修改成 scss 或 sass 格式
2. 盡量多使用 & 連結符號減少重複代碼
3. 嘗試把一些重複的、可找到規律的部分做成變數
4. 記得設定 CSS 區塊為 SCSS 或 Sass 謝謝

補充：
進入範例檔案後點擊右下角 fork 即可把 codepen 複製一份到自己帳號
有疑惑處可在 slack 上詢問，若需要幫助也請到 slack 上尋求支援

**Ans: [CodePen 連結](https://codepen.io/jeffhung/pen/BaWXLOp?editors=0011)**
- 學到最驚艷的事：原來 & 可以當成字串連接符號
- e.g.

        .menu {

        }
        .menu-list {

        }
        .menu a {

        }
        .menu a: hover {

        }
        //可以改寫成
        .menu {
            &-list {

            }
            & a {
                &:hover {

                }
            }
        }

### 參考答案：

<!-- 
1. WangShuan - 答案參考:
ＨＴＭＬ：

$black: #000;
$white: #fff;

$primary: #ffa;
$secondary: #8a8a8a;
$secondary-dark: #333;

$spacer-1: 5px;
$spacer-2: $spacer-1 * 2;
$spacer-3: $spacer-1 * 3;
$spacer-4: $spacer-1 * 4;
$spacer-6: $spacer-1 * 6;

$spacer-n1: -1px;

$font-size-base: 20px;
$font-size-m: $font-size-base * 1.2;
$font-size-l: $font-size-base * 1.8;

$border-width-1: 1px solid;

* {
box-sizing: border-box;
}

.container {
max-width: 1040px;
margin: 0 auto;
border: $border-width-1 $secondary;
}

.header {
background-color: $primary;
padding: 0 $spacer-3;
margin-bottom: $spacer-n1;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;

.logo {
font-size: $font-size-l;
a {
color: $black;
text-decoration: none;
text-shadow: 1px 2px 2px $secondary;
&:hover {
color: $white;
}
}
}
.menu {
display: flex;
&-item {
padding: $spacer-4;
a {
color: $secondary;
text-decoration: none;
}
}
}
}

.content {
display: flex;
flex-wrap: wrap;
}

.sidebar {
width: 30%;
padding: $spacer-6;
border-right: $border-width-1 $secondary;
text-align: center;

@media screen and (max-width: 540px) {
width: 100%;
}

&-title {
font-size: $font-size-base;
padding: $spacer-2 0;
border-bottom: $border-width-1 $black;
margin-bottom: $spacer-2;
font-style: italic;
color: $secondary;
}
}

.listGroup {
line-height: 2;
&-item {
margin: $spacer-1 0;
a {
color: $secondary-dark;
padding: 0 $spacer-1;
&:hover {
background-color: $secondary;
color: $primary;
}
}
}
}

.main {
padding: $spacer-3 $spacer-6;
width: 70%;
@media screen and (max-width: 540px) {
width: 100%;
border-top: $border-width-1 $black;
}
.title {
font-size: $font-size-m;
margin: $spacer-3 0;
}
.desc {
margin-left: $spacer-4;
list-style: decimal;
&-item {
color: $secondary-dark;
margin-bottom: $spacer-3;
}
}
}

.footer {
background-color: $primary;
text-align: center;
padding: $spacer-3 0;
margin-top: $spacer-n1;
}

## JS 任務題目

請看 50 小時影片的**物件教學**章節，到**新增物件屬性**看完後，依照下方說明撰寫代碼：

1. 建立一個物件 user ，屬性有姓名(name)、性別(gender)、年齡(age)、是否已婚(isMarried)
2. 屬性值部分請依照你自己的狀態填入(EX:助教自己的狀態是姓名 wangshuan 性別女 年齡24 已婚，就照寫)
3. 嘗試添加一個新的物件屬性，比如添加興趣或是有幾個小孩等等，這部分同學可自由發揮

代碼大概是這樣：

let user = 一個物件，裡面有四個物件屬性且同學要把值寫上;
console.log(user) 看一下是否建立成功
接下來幫 user 新增一個物件屬性 如 hobbies、children 等等，寫入對應的值
最後再 console.log(user) 確認是否寫入成功

完成後把代碼放在 codepen 的 JS 區塊即可

let user = {
name: 'Omg',
gender: 'Male',
age: 21,
isMarried: true,
};
console.log(user);
user.hobbies = 'tennis';
console.log(user);