
この投稿ページだけ、ヘッダーからフッター、中身まで全部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化しないと!