iT邦幫忙

2021 iThome 鐵人賽

DAY 23
2
Modern Web

SASS 基礎初學三十天系列 第 23

DAY 23 Typography, Hover 以及 Extend

隨著內容越來越多,結構更加複雜,是時候來整理一下關於字型的配置,這次我們來新增一個 _typography.sass 的 partial,並且利用 extends 的方式來套用這些字型配置

Typography

首先新增檔案 _typography.sass,並且將重複用到的字型內容配置好,如常常用到的 link font style,以及 logo 的樣式

// _typography.sass

%link-font
    letter-spacing: 0.1em
    font-size: $menu-item-font-size
    font-weight: 900

%logo-font
    font-size: 100px
    font-weight: 100
    font-family: $logo-font

之後在 main.sass 中新增 import

// main.sass

@import "variable"
@import "basic"
@import "typography"
@import "header"
@import "dropdown"

而之前有使用到的相關 class 進行替換,例如 _header.sass 中的字型以及 logo 的部分

// _header.sass

.header
    box-shadow: -2px 2px 5px #0000001a
    border-top: 12px solid $primary-color
    @extend %link-font

    //...

    .logo
        @extend %logo-font

之後如果有新的字型設定,就統一在 typography 設置,之後在使用 extand 來使用

這樣一來就完成 typography 的配置了~~~

Hover

除了 typography 之外,我們再來將 label 的 hover 做 extend 的處理,因為他也經常被重複使用到

這次我們將他加入在 basic 中,因為他算是全域的被使用到,而且內容也還沒多到能獨立拆分為 sass 檔案

// _basic.sass

%hover-style
    color: $secondary-color
    cursor: pointer

接著在會使用到的地方加上 extend

// _modal.sass

.modal-button:hover
    @extend %hover-style

還有之前 dropdown 使用到的 label 也是

// _dropdown.sass

.dropdown
    position: relative
    display: inline-block

    // ...

    &-label:hover
        @extend %hover-style

    // ...

這樣就完成設定了!

以上~大家明天見~~


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

lu23770127 - SASS 基礎初學三十天

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

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

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

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


上一篇
DAY 22 製作 Nav Bar - Hamburger
下一篇
DAY 24 Full Screen Modal
系列文
SASS 基礎初學三十天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

1
lw90967
iT邦新手 5 級 ‧ 2021-10-08 11:52:29

Typography 推

我要留言

立即登入留言