MENU
  1. ホーム
  2. Sass
  3. WordPressでSassを用いる際のフォルダ・ファイル構成

WordPressでSassを用いる際のフォルダ・ファイル構成

Sass WordPress

Sassは@mixinや入れ子で記載ができるなど便利な機能があるので積極的に使いたい、
というのが個人的な意見です。

一方使うためには少々管理が難しく、ついつい煩雑になってしまうデメリットも。

一度整理しないと自分でも良く分からなくなりつつあったので、
私なりのSass周りのディレクトリ構成をまとめてみました。

この記事の著者

web制作エンジニア

伊藤 義尚

2021年よりweb制作の学習を開始し、現在1社と業務提携中

自身が学んだこと、ためになったことを発信しています

もくじ

WordPressにおけるSass周りのファイル、フォルダ構成

早速ですが、上から順にフォルダ構成から。

cssフォルダとsassフォルダで、大きく分けています。

cssフォルダ

cssフォルダにはreset.cssとコンパイルされたcssファイルが入ります。

cssフォルダ内のデータは参照されることはあっても基本的に触りません。

sassフォルダ

sassフォルダは実際作業するファイルが入っている作業フォルダになります。

上から順に中身を説明していきます。

configフォルダ

中には_config.scssを入れています。

_config.scssには主にメディアクエリ設定の為の@mixinを定義しています。
他にも@mixinで再利用する構造や、変数などを定義するのにも使います。

$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;
$xxl: 1400px;

@mixin md {
  @media screen and (max-width: $md) {
    @content;
  }
}

呼び出す時は以下の様に使います。

@include config.md{
  font-size: 16px;
}

common.scss

ファイル名の通り共通パーツのcssを記載します。

例えば、フォント、インナー幅、共通ボタンなどに使用します。

共通の要素なのでページ全体で使うことを想定し、reset.cssと共にfunctions.phpで読み込んでいます。

wp_enqueue_style('reset', get_template_directory_uri() . '/files/css/reset/reset.css', array(), $time_string);
wp_enqueue_style('style_common', get_template_directory_uri() . '/files/css/common.css', array(), $time_string);

wp_enqueue_styleの第一引数にcommonを使うと、wp-admin内のcommon.min.cssを読み込んでしまうので注意が必要です。

herder.scss、footer.scss、front.scssなど

共通パーツや各ページのファイルはこちら。

各ページの1行目には以下の記載し、_config.scssで定義した内容を読み込みます。

@use "config/config";

気をつけていること

色々試行錯誤してきた私が気をつけていることをまとめてみました。

全て内容をstyle.cssにまとめるのを辞めた

「全てのcssを一つのファイルにまとめたら楽なんじゃない？」と思いやってみましたが、意外と

クラス名のバッティングが生じて管理が大変でした。

フォルダ名、ファイル名は全て小文字にする

サーバーにアップすると問題が出るときの原因1位です。

大文字だったり小文字だったりでバラバラなのが嫌なので、私は全て小文字で統一しています。

.scssファイルは、全てsassフォルダ直下にいれる

Live Sass Compilerの設定でcssファイルの出力先を設定できるのですが、最上位にcssフォルダとscssフォルダを持ってこようとすると、.scssファイルは全てsassフォルダの直下にいれる必要があります。

Live Sass Compilerでは以下を記載しています。

"savePath": "~/../css/"

まとめ

WordPressにおけるsassフォルダの構成をまとめてみました。

皆さんの参考になれば幸いです！

Sass WordPress

関連記事

もくじ