SCSSの書き方

夢中教室のサイトでは、スタイリングにSCSSを使用しています。

例

index.html

<section class="p-pagename-section">
  <div class="p-pagename-section__inner">
    <div class="p-pagename-section__headding">
      <h2 class="p-pagename-section__heading__title">
        見出し
      </h2>
    </div>
    <div class="p-pagename-section__container">
      コンテンツ
    </div>
  </div>
</section>

_example.scss

.p-pagename-section {
  background: $bg-main;
  &__inner {
    margin: 12px 5%;
    @include mq(){
      margin: 24px 10%;
    }
  }
  &__headding {
    margin: 10px 5%;
    @include mq(){
      margin: 20px 10%;
    }
    &__title {
      font-size: 1.8em;
      @include mq(){
        font-size: 2em;
      }
    }
  }
  &__container {
    
  }
}

解説

scssのファイル名

新LP作成等で新たにscssファイルを作る際、ファイル名の前には必ずアンダーライン（_）を入れましょう。

（例：_example.scss）

変数

scssでは$○○○○で変数を作って使いまわすことができます。

夢中教室Webではカラーテーマを変数に設定しています（_color.scss）。

ネスト（入れ子）

セレクター名に&を付けて入れ子構造でスタイルを記述していきます。

モバイルファースト

夢中教室Webはモバイルファーストでスタイルを記述しています。PCサイズのスタイルは@include mq(){...}の中に記述していってください。 より細かいレスポンシブデザインのブレークポイントを設定したい際は_mixin.scssを参考にしてください。

style.cssへのコンパイル

scssを書いただけではサイトにスタイルは適用されません。cssにコンパイルさせる必要があります。

コンパイルとは？

コンパイルとは、人間にとって読みやすい言語をコンピューターにとって読みやすい言語に変換することをいいます。

WordPressはSCSSをそのまま解釈することができないため、CSSに手動でコンパイルすることでスタイルを適用します。

詳細：https://e-words.jp/w/%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB.html

scssをcssにコンパイルする際は、ターミナルを開いて

npm run dev

とコマンドを打ってください。「gulp」という開発ツールが起動します。

gulpが起動して、scssファイルを上書き保存すると以下のようなログが表示されます。こうなっていればコンパイルは成功しています。

> gulp-dev@1.0.0 dev
> gulp dev

[10:26:20] Using gulpfile ~\Documents\wowfull-2024\app\public\wp-content\themes\wowfull-2023\gulpfile.js
[10:26:20] Starting 'dev'...
[10:26:49] Starting 'sass'...
[10:26:49] Finished 'sass' after 22 ms