針對 dropdown content，再來做一些微調，讓他更像 vogue 官方的樣式

// _dropdown.sass

.dropdown
    position: relative
    display: inline-block

    &-content
        display: none
        background-color: $primary-background-color
        box-shadow: $gray -2px 2px 5px
        margin-left: -4px
        min-width: 120px
        max-height: 300px
        overflow: auto
        padding: 4px
        position: absolute

這次我們加上了高度限制，並且讓 overflow 的內容會 auto hide，那就可以使用 scroll bar 的方式來捲動 content 的內容檢視

上面的 box-shadow 常常被用到，我們把它抽出來當 variable 使用吧！

一樣先在 _variable.sass 中取名並放入設定值

// _variable.sass
    
//font 
@font-face
    font-family: 'Noto Sans TC', sans-serif
    font-family: 'Noto Serif TC', serif
    font-family: 'Prata', serif
    src: url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@700&family=Noto+Serif+TC:wght@500&family=Prata&display=swap')

$logo-font: 'Prata', serif
$sans-font: 'Noto Sans TC', sans-serif
$serif-font: 'Noto Serif TC', serif

$menu-item-font-size: 12px

//color
$primary-color: #000
$secondary-color: #EE0000
$primary-background-color: #fff
$gray: #f2f2f2

//shadow
$default-box-shadow: $gray -2px 2px 5px

順便大概區分了一下個區域所設定的內容，避免之後東西越來越多找不到

然後把預設好的 box-shadow 再放回有使用的地方

// _dropdown.sass
    
.dropdown
    position: relative
    display: inline-block

    &-content
        display: none
        background-color: $primary-background-color
        box-shadow: $default-box-shadow
				// ...

大概就是以上這樣啦！我們明天見！

除此之外，也歡迎大家走走逛逛關於我們團隊夥伴的文章

lu23770127 - SASS 基礎初學三十天

10u1 - 糟了！是世界奇觀！

juck30808 - Python - 數位行銷分析與 Youtube API 教學

HLD - 淺談物件導向與Design Pattern介紹

SiQing47 - 前端？後端？你早晚都要全端的，何不從現在開始？