[WordPress]SCSSをコンパイルするプラグイン「WP-SCSS」の使い方

大好きな`SCSS`を使って、大好きな`WordPress`のテーマを制作したいけど、
私は、WordPress以外のツールをいれるのに抵抗を感じました。

でも私は、素晴らしいプラグインを見つけました。

**[WP\-SCSS – WordPress プラグイン \| WordPress\.org 日本語](https://ja.wordpress.org/plugins/wp-scss/)**

これでもう怖いものはありません。

今回はそのプラグイン**「[WP\-SCSS](https://ja.wordpress.org/plugins/wp-scss/)」**の使い方と設定を紹介していいきます:point_up_tone2:

ついでにあくびを見せつけるまなちゃんも紹介します。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/32c55c3e-0d40-774d-1dcf-2d2170b8c01d.jpeg">
見せつけてますね。かわいい



#下準備
プラグインを使う前にディレクトリを作成して下準備をしましょう！

1. **`SCSS`ファイルたちを入れるディレクトリ**を作成
2. **自動生成される`css`ファイルを入れるディレクトリ`**を作成

下記のようなイメージです。
**今回はこのディレクトリ構造で説明します。**
scssファイルはフォルダ分けされ整理されています。
それを`style.scss`にインポートさせています。

:open_file_folder:`theme`
∟ :open_file_folder:`my-theme`
　∟ **:open_file_folder:`css`**　:heart_exclamation:作成
　∟ **:open_file_folder:`scss`**　:heart_exclamation:作成
　　∟ **:page_facing_up:`style.scss`**　:heart_exclamation:作成　ここにインポートする
　　∟ **:open_file_folder:`foundation`**　:heart_exclamation:作成
　　　∟ **:page_facing_up:`base.scss`**　:heart_exclamation:作成
　　　∟ **:page_facing_up:`reset.scss`**　:heart_exclamation:作成
　　　︙
　　∟ **:open_file_folder:`layout`**　:heart_exclamation:作成
　　∟ **:open_file_folder:`Object`**　:heart_exclamation:作成
　　︙
　∟ :open_file_folder:`front-page.php`
　∟ :open_file_folder:`header.php`
　∟ :open_file_folder:`footer.php`





#「[WP\-SCSS](https://ja.wordpress.org/plugins/wp-scss/)」をインストール
**管理画面＞プラグイン＞新規追加画面**に移動し、「WP-SCSS」と検索する。
「WP-SCSS」を`今すぐインストール`し`有効化`しましょう。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/773d2e5f-3632-e944-751c-cc812edf9baa.png">





#設定:gear:
**管理画面＞設定＞WP-SCSS**を開く
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/71f30331-16ca-9d81-0183-d2851247a177.png">


##①ディレクトリを設定

**SCSSがどこにあるか、CSSはどこに生成するかの設定。**
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/8e0912b0-b4cf-3945-d513-bd1fc543b2a7.png">

- **Scss Location…SCSSのパスを指定**　（※今回は`/SCSS/`）
- **CSS Location…CSSのパスを指定**　　（※今回は`/CSS/`）

※コンパイルされるSCSSは**`scss`ディレクトリ直下のscssファイルのみ**になります。（今回は`style.scss`）
**`scss`ディレクトリ直下のディレクトリ内のファイルは直接コンパイルされない**ので、今回のように、**直下の`style.scss`にimport**させましょう。


##②コンパイル時のオプションの設定
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/ef561fc2-ae07-0afe-cd39-d459a46e6986.png">

- **Compiling Mode…コンパイル後のCSSの状態　（※今回は`compressed`で設定）**
    - `Expanded`…通常の状態
    - `Nested`…通常の状態（`Expanded`と同じように見えて違いがわからなかった）
    - `Compressed`…改行、スペース、コメントが削除された圧縮の状態
    - `Compact`…スタイル内の改行が削除された状態（例：`table { border-collapse:collapse; border-spacing:0; }`）
    - `debug`…SCSSの`@debug`という機能のなにかだと思うが、今度調べます。
    - `crunched`…改行、スペース、コメントが削除された圧縮の状態（`Compressed`と同じように見えて違いがわからなかった）
 
- **Source Map Mode…ソースマップを作成するか（※今回は`File`で設定）**
    - `None`…ソースマップは作成しない
    - `Inline`…生成されるCSSファイル内に出力
    - `File`…生成されるCSSに紐付けられ、ソースマップファイルが生成される

※**ソースマップとは**…
Chromeなどで検証した際、cssが元のscssファイルの何行目の設定なのか、ということを伝えるためのもの。
ソースマップがあれば、コンパイル元の修正箇所がすぐに分かる。

- **Error Display…コンパイル時のエラー（SCSSのエラーなど）を表示する位置（※今回は`Show in Header`で設定）**
    - `Show in Header`…サイトのヘッダーに表示される
    - `Show to Logged in Users`…WordPressにログインしてる場合のみサイトのヘッダーに表示される
    - `Print to Log`…`error_log.log`というファイルが生成さる

##③生成されたCSSを自動でヘッダーに読み込み文を追加するか
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/5bb0be36-cea3-6689-a547-9a1b714a378d.png">

- **`Enqueue Stylesheets`…チェックをいれると自動でヘッダーにCSSを読み込む文雅追加される（今回はオフに設定）**

管理画面での設定は以上です:point_up_tone2:



#ページをロードするたびにscssファイルを強制的にコンパイルできるようにする

WP-SCSSはデフォルトの設定だと、指定したscssファイル（**`scss`ディレクトリ直下のscssファイルのみ**）が保存されたときにしかコンパイルされません。

>※コンパイルされるSCSSは**`scss`ディレクトリ直下のscssファイルのみ**になります。（今回は`style.scss`）
**`scss`ディレクトリ直下のディレクトリ内のファイルは直接コンパイルされない**ので、今回のように、**直下の`style.scss`にimport**させましょう。

今回のように、`style.scss`にimportさせている方法ですと、をいちいち`style.scss`を保存するという手間があります。

なので、**ページをロードするたびにscssファイルを強制的にコンパイルできるように**して、その手間をなくします。

`function.php`に下記を追加する:writing_hand_tone2:

```php:function.php
/**
 * WP-SCSS：ページをロードするたびにscssファイルを強制的にコンパイル.
 */
define( 'WP_SCSS_ALWAYS_RECOMPILE', true );
/* ================================================================================ */
```

これでリロードするたびに、コンパイルされるようになります。



#とても残念ですが、そのまま使うとエラーが出る:sweat:

さっそくSCSSをかいてコンパイル！って思うんですが、このままだと下記のようなエラーが出ます。

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/2027aa77-a289-abd4-a514-4b424beb1036.png">
>/app/public/mw/wp-content/plugins/wp-scss/cache/ - File Permission Error, permission denied. Please make the cache directory writable.



そんな複雑なエラーではなく、
**「書き込み可能な`cache`ディレクトリを作成してください」**
と言っています。

##ならば書込み可能な`cache`ディレクトリを手動で作成してあげよう:relaxed:

:open_file_folder:`wp-content`
∟ :open_file_folder:`plugins`
　∟ **:open_file_folder:`wp-scss`**
　　∟ **:open_file_folder:`cache`**　:heart_exclamation:作成
　　∟ :open_file_folder:`class`
　　∟ :open_file_folder:`class-wp-scss.php`
　　∟ :open_file_folder:`scssphp`
　　　︙

Macの`Finder`から`cache`ディレクトリを作成します。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/736d552a-089c-7d2c-cb25-961cd5f3e688.png">

`cache`ディレクトリを`右クリック＞情報を見る`で`cache`ディレクトリの情報を表示。
下の方にある、`▼共有とアクセス権`で、下記のように読み書き可能に設定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/17fb2590-2d81-56ed-b4ed-c3de0a0fd580.png)

これで再度コンパイル（ページロード）すればエラーはなくなります:muscle_tone3:

これで設定は以上です…おわり:baby_tone2:

#参考サイト
[『WP\-SCSS』が便利だから、Wordpress使ってる人はSCSS使いません？ \| 株式会社Orfool](https://orfool.com/programing/1756/)