终於来到 Footer 了ＱＱ，总觉得写了好久

新增档案

跟前面的流程一样，新增 footer 的 js, sass 档案，并且汇入

// Footer.js

import React from "react";
export default function Footer() {
  return (
    <div>
      <div>test</div>
    </div>
  );
}

// App.js

import "../src/assets/sass/main.sass";
import Header from "./components/Header";
import Article from "./components/Article";
import Footer from "./components/Footer";
function App() {
  return (
    <div className="container">
      <Header />
      <Article />
      <Footer />
    </div>
  );
}

export default App;

// main.sass

@import "variable"
@import "basic"
@import "typography"
@import "header"
@import "dropdown"
@import "modal"
@import "article"
@import "footer"

结束！接着来排版内容

Footer 本人

这边别忘了再加上 line 在 icon 系列中～

因为 icon 被重复使用到了，这边使用 flex 做个优化加上把内容统整过，让 sass 能更简洁！

// Footer.js

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleDown } from "@fortawesome/free-solid-svg-icons";
import {
  faFacebookF,
  faInstagram,
  faYoutube,
  faLine,
} from "@fortawesome/free-brands-svg-icons";

export default function Footer() {
  const info = [
    "Masthead",
    "连络我们",
    "Careers",
    "服务条款与隐私权声明",
    "Media kit",
    "会员电子报",
    "杂志订阅",
    "广告素材规范",
  ];
  return (
    <div>
      <div className="ads">
        <a href="/">
          <img
            alt="ads"
            src="https://tpc.googlesyndication.com/simgad/4418991333586357163"
          />
        </a>
      </div>
      <div className="footer">
        <div className="edition">
          EDITION
          <button>
            TAIWAN
            <FontAwesomeIcon icon={faAngleDown} size="lg" />
          </button>
        </div>
        <div className="dark-gray">
          <div className="logo">VOGUE</div>
          <div className="icon">
            <div class="icon-box">
              <div class="icon-wrapper">
                <FontAwesomeIcon icon={faFacebookF} className="social-media" />
              </div>
            </div>
            <div class="icon-box">
              <div class="icon-wrapper">
                <FontAwesomeIcon icon={faInstagram} className="social-media" />
              </div>
            </div>
            <div class="icon-box">
              <div class="icon-wrapper">
                <FontAwesomeIcon icon={faYoutube} className="social-media" />
              </div>
            </div>
            <div class="icon-box">
              <div class="icon-wrapper">
                <FontAwesomeIcon icon={faLine} className="social-media" />
              </div>
            </div>
          </div>
        </div>
        <div className="footer-content">
          <div class="conde-nast">
            conde nast <p>taiwan</p>
          </div>
          <div className="footer-link-group">
            {info.map((item) => {
              return (
                <a href="#" className="footer-link">
                  {item}
                </a>
              );
            })}
            <div className="footer-link">Cookies</div>
          </div>
          <div className="copyright">© 2021 Condé Nast</div>
        </div>
      </div>
    </div>
  );
}

这边还蛮多之前已经用过的元素，组装起来很快速，之前讲过的东西就不重复说明了，一样有问题可以在下方留言～

// _footer.sass

.footer
    @extend %link-font
    font-weight: normal
    color: $primary-background-color
    background-color: $darker-gray
    height: auto
    padding: 0 0 32px 0
    .edition
        padding: 0 76px
        text-align: right
        font-weight: bold

        button
            margin: 0 0 0 8px
            padding: 18px 24px
            color: $primary-background-color
            border: none
            background-color: $secondary-color

    .dark-gray
        padding: 0 4vw
        align-items: center
        background-color: $footer-gray
        display: flex
        justify-content: space-around

        .logo
            @extend %logo-font
            margin: -80px 0
            font-size: 290px
            letter-spacing: -16px
            color: $darker-gray
            font-weight: 100
        .icon
            gap: 16px
            .icon-wrapper
                border: 1px solid $primary-background-color
                &:hover
                    border: 1px solid $secondary-color

    &-content

        text-align: center
        @extend %link-font
        font-weight: 100

        .conde-nast
            @extend %logo-font
            text-transform: uppercase
            padding: 16px
            font-size: 32px
            p
                @extend %link-font
                font-size: 8px

    &-link
        font-size: 12px
        margin: 6px 12px
        display: inline-block
        color: $primary-background-color
        text-transform: capitalize

        &-group
            margin: 16px
        &:hover
            color: $dark-gray

    .copyright
        margin: 48px
        color: $gray
        font-size: 11px
        background-color: $darker-gray

sass 的部分大部分都是排版跟细节挑整，就不说明细节了，这次用到了比较多 flex box 的用法，尤其是在更新 icon 的做法上，因为之前的方法不管如何都无法让长宽不一的 icon 们有个正圆，所以这次用了先画圆再套上 icon 的做法，而这个作法使用到 flex box 的方法让我研究了十分之久！：Ｄ

因为 icon 再 modal 上也会用到，所以我把他抽到了 basic 来统一设定样式，这样就可以一鱼两吃！（？

// _basic.sass

.icon
    display: flex
    width: 150px
    gap: 8px
    &-box,&-wrapper
        display: flex
        justify-content: center
        align-items: center

    &-wrapper
        border-radius: 50%
        overflow: hidden
        border: 1px solid $darker-gray
        font-size: 1.5rem
        width: 40px
        height: 40px

        &:hover
            @extend %icon-link-hover

        ::selection
            background: $secondary-color

这边先在最外框 icon 这个 class 放上 flex 的样式，让接下来套用这个 div 的内容都可以使用 flex 的属性，box, wrapper 分别放上调整位置为置中的 justify-content, align-items 来使圆形以及 icon 本人对其，wrapper 再设定上圆形的属性即可。

关於 flex box 的介绍可以参考这里～里面有图解的介绍蛮清楚的！

A Complete Guide to Flexbox

恩，好像应该早点开始用 flex box XD

除此之外，也欢迎大家走走逛逛关於我们团队夥伴的文章

lu23770127 - SASS 基础初学三十天

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

juck30808 - Python - 数位行销分析与 Youtube API 教学

HLD - 浅谈物件导向与Design Pattern介绍

SiQing47 - 前端？後端？你早晚都要全端的，何不从现在开始？