エンジニアスタンプラリー～フロントエンド編＃4

企画主旨

Frontend Developer Roadmapをひたすら巡回する企画
詳しくはこちら

今回の実施内容

CSSプリプロセッサ
選択しが３つあるようだが、唯一黄色表示になっているSASSを選択。
ロードマップ作成者曰く、「今からLess始める、なんてことしたくないけどね。私なら。」とのこと。

CSS Pre-processors

SASS

yarn経由でSassをインストール。便利ですねえ。

"scripts": {
    "watch-css": "sass --watch src/sass/main.scss styles/style.css",
},

公式サイトSass Basicsに従って、シートを分割したり、階層構造にしたり、変数使ったりしてみた。
記法はSCSS記法を選択。なんかややこしい。

main.cscc

@import 'base';
$font-stack: "Open Sans", sans-serif;
$bg-color:#ffffd9;

body {
  width: 600px;
}

header {
  h1 {
    font-size: 40px;
    text-align: center;
    margin: 0;
    padding: 30px 0;
    color: #00539f;
    animation-name: fadeInTitle;
    animation-duration: 3s;
    animation-timing-function: ease-in;
  }

  nav {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
  }

  h2 {
    flex: 1;
    text-align: center;
    background-color: $bg-color;
    margin: 0;
    padding: 20px 0;
  }

  h2:nth-child(2){
    background-color: white;
  }
}

成果物

デザインを少しだけアップデート。Sass使うと捗ることを実感。
https://tonchan1216.github.io/WDR-frontend/v4/
https://github.com/tonchan1216/WDR-frontend/tree/4.0