[web]scssコーディングスターターキット

自分用。

これ
説明
もうちょっと説明
おまけ

これ

“scss_default” をダウンロード css.zip – 69 回のダウンロード – 2.63 KB

wpでいうstyle.cssを作る内容。

自分の組み方にあったというか、よく使うやつのベースをまとめてある。

説明

style.scssでは変数（カスタムプロパティ）の宣言と初期化（_normalize.scss）、基本形（_default.scss）、SP（_sp.scss）、関数（_mixin.scss）を読み込んでまとめて出力する。なので、実際のstyleは読み込み先のファイルで記載する。

_mixin.scssではレスポンシブとpointer:fineの内容を書いてる。
詳細はこっちの記事。

発火する幅は$breakpointsで変数化してるので都合が悪ければ調整する。もしくは数値を手打ちする。
こんな感じで使う。

@include mixin.mq(min, md){
    /* 768px以上 */
    .onlySP{ display: none;}
}
@include mixin.mq(max, md){
    /* 767.98px以下 */
    .onlyPC{ display: none;}
}
@include pf() {
    /* pointer: fine（マウスカーソルを乗せたときの動作） */
    a:hover{ color:red; }
}

関数を使えばscssの階層内でレスポンシブを仕込めるんだけど@mediaの数が多くなるのが好きじゃないのと行数が増えすぎると分かりにくいのとでファイル単位でPC/SPを切り分けて記載するようにしてる。

もうちょっと説明

scssを忘れたときに都合の良い形になってるので、調べ直すならまずファイルを読み返したほうが早い。

特に_default.scss。

:rootの活用

:root{
    --sans-serif: sans-serif;
    --serif: serif;
    --blue: #0f3668;
    --blue-rgb: 15,54,104;
    --red: #af1e2b;
    --red-rgb: 175,30,43;
    --header-height: 60px;
}

.sample{ background: var(--red); }
.sample:hover{ background: rgba(var(--red-rgb),.2); }

変数だから書いてある内容を引っ張ってこれる。
引っ張るまではただの文字列なんで、rgbを仕込んでおけばaの数値を追加してrgbaが完成する。これがなかなか便利。

画像パスも仕込めるわけだけど、読み込み先のcssファイルの階層が変わるとリンク切れになるので、どっからでも呼び出せるようにフルパスで書かないといけない。それか階層に応じた変数を仕込むことになる。そうするとめんどくさいので、パス関連にはあんまり使いたくない。作ってる最中はいいけど後で改修する際にだるい。

疑似要素にmaterial iconsとかfontawesomeを仕込むときには最低限テンプレになる内容があるわけで、それは変数なり関数なりで書いても良さそうに思ったりもするんだけどまだ試してないから使用感がわからない。利用シーンが少ないから作らなくていいかなって思ってる。

関数はファイルごとに読み込む

@use "./mixin";

読み込んだ外部ファイルは記載したファイル内にしか影響しないので、例えばこの場合style.scssで関数を読み込んでも_default.scssには影響されない。切り分けられてるのは助かるけど、読み込みを忘れると書き出し時にエラーになる。

&の後にスペースを入れずにclassを連結

.container{
    width: calc(100% - 40px);
    margin: 0 auto;
    &.w1200{
        max-width: 1200px;
    }
    &.w980{
        max-width: 980px;
    }
    &.w720{
        max-width: 720px;
    }
}

<div class="container w1200"></div>
<div class="container w980"></div>
<div class="container w720"></div>

&の後にスペースを入れずに文字列を連結

.ta{
    &_center{
        text-align: center !important;
    }
    &_right{
        text-align: right !important;
    }
}

<p class="ta_center">中央寄せ</p>
<p class="ta_right">右寄せ</p>

おまけ

VSCodeを使ってるなら拡張機能でscss→cssの書き出し、minifyもできる。

書き出し：glenn2223.live-sass
minify：HookyQR.minify

minifyのサービスはいっぱいあるけど動作不良を起こす場合があるので動作確認は必ずする。
ダメだった場合はサービスと記載内容が合ってなようで、別サービスで作ると解決した。

scssに慣れるとcssがめんどくさくなってくる。
このストレスはscssのない構築に手を入れる場合に効いてくる。
cssをscssに変換したい場合はここで。

Css2Sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code

.minばかりで非圧縮状態のファイルがない場合は展開するサービスもある。

DirtyMarkup Formatter - HTML, CSS, & JavaScript Beautifier

A free tool to clean up your dirty code. DirtyMarkup is the best HTML, CSS, and Javascript (JS) beautifier with an API t...

ただし、minifyを通したときに記述が変わっている（効果は同じ）こともあるので、それは念頭に入れておく。