【Sass(SCSS)】PC版とSP版のCSSファイルを分ける方法

今ではレスポンシブが当たり前でPC版とSP版（スマホ）のデザインはメディアクエリで切り替えるのが主体ですが、場合によってはPC版とSP版のCSSファイルを全く別にしたいという要望があるかもしれません。
style_pc.css、style_sp.cssというように。

Dart-sass環境のSass(SCSS)でこれをやるとなると意外と面倒です。
@importが廃止されているので、グローバル変数が簡単に使用できないためです。
もとからパーシャルファイルもPC用とSP用で分けてしまえば問題ないですが、それだとSassの意味がない。。
ということで、パーシャルファイルは共通のものを使用しつつ、PC版とSP版でスタイルを分ける方法をご紹介します。
ニッチすぎるかもしれないので半分備忘録的なものです。

下準備

たとえば以下のような構造のSassがあるとします。
※必要なものだけ抜き出しています

styles
├── components
│   ├── _box.scss
│   └── _button.scss
├── layouts
│   ├── _header.scss
│   └── _footer.scss
├── settings
│   ├── _variables.scss
│   ├── _base.scss
│   └── _mixins.scss
└── style.scss

今はstyle.scssしかないので、コンパイル後のファイルはPC、SP共通のCSSです。
これをstyle_pc.scss、style_sp.scssに分けます。
style.scssをコピーしてリネームします。

@use "./settings/base";
（省略）

/* layouts */
@use "./layouts/header";
@use "./layouts/footer";
（省略）

/* components */
@use "./components/box";
@use "./components/button";
（省略）

現状はこんな感じで、各ディレクトリから他のSCSSファイルを@useで読み込んでいます。
今はstyle_sp.scssも全く同じファイルなので差異はありませんが、ここに 分岐を追加 して、このSCSSファイルがPC専用であることを示してあげる必要があります。

デバイス判定用の変数を用意する

styles/settingsに_device.scssというファイルを追加してみましょう。

$pc: true !default;

入れる内容はこれだけです。
何に使うのかというと、これが デバイス判定用の変数 の定義となります。
やりたいことは、この変数$pcをPC版とSP版で値を変えて、各パーシャルファイル内でSassの@ifを使い、スタイルを分岐させたいのです。

ただ、これだけ定義しただけでは、仮に各パーシャルファイルから読み込んだとしても分岐には使えません。
PC版のときは$pc: trueとしたいし、SP版のときは$pc: falseとしたいわけです。
そこで使用するのが@forwordです。

変数の上書き

styles/settingsにもう一つ、_index.scssというファイルを追加してみましょう。

@forward 'device';

入れる内容はこれだけです。
前項で作成した_device.scssを@forwordで読み込んでいます。
ここで@useとしない理由は、この_device.scssで定義した変数$pcを他のパーシャルファイルでも参照したいためです。
（@useはメンバーのカプセルの都合上、多段構造的に変数を呼び出すことができません）

style_pc.scssに戻りましょう。
冒頭に下記の記述を追加します。

@use "./settings/index" with (
  $pc: true
);

※厳密には、PC版にはこの記述は必要ないのですが、一応わかりやすくするためにあえて入れています。

これは何をやっているのかというと、@useで_index.scssを参照する際に、withで$pc: true !default;の値を上書きしています。
こうすることによって、このstyle_pc.scssから@useで読み込まれている各パーシャルファイルからも、 上書きされた値 で参照することができるようになります。

style_sp.scssのほうは$pc: falseとしたいので、冒頭に以下の記述を追加します。

@use "./settings/index" with (
  $pc: false
);

各パーシャルファイルでのスタイルの分岐

では、さっそく_button.scssでスタイルの分岐を行ってみましょう。
まずは冒頭で_index.scssを@useする必要があります。

@use '../settings/index' as *;

スタイルを見ていきます。

.btn {
    background-color: blue;
    color: white;
    font-size: 2.0rem;
    padding: 2px 10px;
}

というようなスタイルがあったとします。
このうち、font-sizeとpaddingをPC版とSP版で分岐させたいので、Sassの@ifを使用します。

.btn {
    background-color: blue;
    color: white;
    @if $pc {
        font-size: 2.0rem;
        padding: 6px 10px;
    }
    @else {
        font-size: 1.6rem;
        padding: 2px 5px;
    }
}

これをコンパイルすると、、

.btn {
    background-color: blue;
    color: white;
    font-size: 2.0rem;
    padding: 2px 10px;
}

.btn {
    background-color: blue;
    color: white;
    font-size: 1.6rem;
    padding: 2px 5px;
}

共通部分はそのままに、変えたい部分だけを出力させることができるようになります！
やったね！！！！

……正直あまり使いどころはないかもしれませんが、
使用用途はデバイス判定以外にもあるかと思いますので、
似たようなことをやりたいときに頭の片隅にでも置いておいていただけますと幸いです。