SCSSの基礎知識

拡張子：.scss

メリット：CSSの書き方がそのまま使える

SCSS記法は、括弧{}を使って入れ子構造にすることでCSSの依存関係を示す。

導入の流れ

１．プラグインの追加

使用プラグイン：Lenix scss compiler

「プラグイン」＞「新規追加」で検索したら出てくるので「今すぐインストール」

Lenix scss compilerについて

メリット

• アンインストールしてもコンパイルしたCSSファイルが残る


• コンパイルするディレクトリを複数指定できる


• 指定できるフォルダの位置がWP-SCSSより自由（./wp-content/themesより下の階層ならどこでもOK）

デメリット

• 使っている人が少ない


• 使っている人が少ないからドキュメントがほとんど英語

２．SCSSファイルの作成

Lenix scss compilerは前述の通り、themes以下のファイルをコンパイルしてくれるのでthemes以下にファイルを作成。

今回の場合は、子テーマにスタイルを当てているので「./wp-content/themes/子テーマ/」に設置。

３．プラグインの設定

「設定」＞「Lenix scss compiler」から設定。

画面はこんな感じ

「Add Compiler」を押すとコンパイルしたいディレクトリの指定を増やせる。

「scss folder」にコンパイルしたいディレクトリを指定して、

「css folder」に吐き出す先のディレクトリを指定。

指定の仕方は

【scss folder】

　thmes/子テーマ/コンパイルするディレクトリ

【css folder】

　themes/子テーマ/吐き出す先のディレクトリ

※注意

吐き出す先にコンパイルするscssファイルと同じ名前のcssファイルがいると勝手に上書きされちゃう

「変更を保存」したら設定完了。

これであとはscssファイルを保存するたびに勝手にコンパイルしてくれる。

４．ファイルを読み込む

吐き出されたCSSファイルを読み込まないといけないので、読み込みたいところでCSSファイルを呼び出す。

今回の場合は、すべてのページに適用されてほしいので「header.php」の他のスタイルを読み込んでいる場所に<link ～を記述。

５．テーマの編集でSCSSを編集できるようにする

Snippetsにテーマの編集で表示される拡張子を追加するための記述を作成。

今回つけた名前は「拡張子追加（テーマの編集）」

下記のコードを書いてSnippetsをアクティブにすればテーマの編集に表示される。

add_filter('wp_theme_editor_filetypes', function($default_types) {

  $default_types[] = 'scss';

  $default_types[] = 'js'; /* 追加したい拡張子を1行ずつ増やしていけば出てきてくれる */


  return $default_types;

});

６．実際に書いてみる

あとはSCSSで書くだけ。

SCSSの記述にミスがあった場合、保存が終わらずSave Boxが一生居るので消えないな？と思ったらミスがある。

wordpressのエディタでミスを探すのは至難の業なのでローカルで書いて少しずつ移していくにしたほうがいいかな？

Atomだったら「sass-autocompile」が保存のたびにコンパイルしてエラーチェックしてくれるので便利。

※追記（動作に関して）

1年弱使ってみての感想

保存に関して

保存時にコンパイルしてくれますが、保存完了までの時間は体感ではあまり変わらず？でした。

ちなみにファイルの行数としては3,000行くらいだったのでこれ以上多くなった場合はちょっとわからないです。

エラーに関して

1年弱使って、記述が正しいのに動かなかったのは1回のみ。

// これだと動かない

border-radius: 0 0 10px 10px / 0 0 10px 10px;


// これだと動く

border-radius: 0 0 10px 10px / 0px 0 10px 10px;

border-radius: 0px 0px 10px 10px / 0px 0px 10px 10px;

「/」の後に数値のみだとうまくコンパイルされないようで、単位をつけると問題なく動きました。