2020年01月04日

Sass(SCSS記法)導入。

この投稿ページだけ、ヘッダーからフッター、中身まで全部Sassで作りました(2020年1月4日時点)。
今回は試しにtest.scssというscssをコンパイルしたスタイルシートtest.cssをミニファイ化したtest.min.cssから読み込んでいます(コンパイルとミニファイ化と自動ベンダープレフィックスにはgulpを使用しています)。

サイト全体はcssで書いているので、今からSassに変更し直すのがとても面倒です。。さらにメディアクエリもcss自体をブレイクポイントで分ける方法をとっているので、更新が面倒です(PCとSP両方更新するので)。
まあ昔作ったものがベースのサイトなのでしょうがないのですが、今後はどんどんSass(＋1つのscssファイルで管理)で書いていくことにします。

それにしてもSassは非常に管理がわかりやすくて楽です。自分は下記のようにブレイクポイントをmixinで設定しておいて

/* first-edit */
$breakpoints: (
  'ss': 'screen and (max-width: 768px)',
  'ps': 'screen and (min-width: 769px)',
) !default;

/* first-edit:ss */
@mixin mq($breakpoint: ps) {
    @media #{map-get($breakpoints, $breakpoint)} {
      @content;
    }
  }

それをincludeで呼び出すようにしました。

.flex-area {
    display: flex;
    position: relative;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    justify-content: flex-end;
    @include mq() {      
        background: #f4f7f6;       
        height: 70px;
        min-width: 1280px;
    }
    @include mq(ss) {
        height: 70px;
    }
  }

@include mq()がデフォルトでPCサイズ、
@include mq(ss)がスマホサイズです。

うーん早く全体をSass化しないと！