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 - 前端？後端？你早晚都要全端的，何不从现在开始？