IM-BASE IM-BASE

お問い合わせ

SCSS Architecture

A developer guide to the current SCSS source structure, responsive output, and customization workflow in IM Base.

Overview

IM Base follows a source-first SCSS workflow. Edit the files under assets/scss/ rather than changing generated CSS alone, then compile and synchronize the corresponding files under assets/css/.

The shared entry point, assets/scss/style-common.scss, produces assets/css/style-common.css. The desktop or tablet entry point, assets/scss/style-pc.scss, produces assets/css/style-pc.css for Tablet and Desktop ranges. The mobile entry point, assets/scss/style-sp.scss, produces assets/css/style-sp.css for the Mobile range.

  • assets/scss/style-common.scss compiles to assets/css/style-common.css.
  • assets/scss/style-pc.scss compiles to assets/css/style-pc.css and serves Tablet and Desktop ranges.
  • assets/scss/style-sp.scss compiles to assets/css/style-sp.css and serves the Mobile range.

Entry Points and CSS Delivery

The shared entry point, assets/scss/style-common.scss, uses variables-common, pages/article, and the parts index, and produces assets/css/style-common.css. The responsive entry points produce assets/css/style-pc.css and assets/css/style-sp.css. style-pc.scss imports the PC body, header, main, sidebar, and footer layouts plus desktop component modules. style-sp.scss imports the corresponding SP layouts, the mobile navigation layout, and mobile component modules.

WordPress enqueues style-common.css for all media, style-sp.css for Mobile, and style-pc.css for both Tablet and Desktop. The media ranges use the current responsive settings: mobile_max, tablet_min, tablet_max, and desktop_min. Each stylesheet is enqueued only when its generated CSS file exists.

@use "variables-common" as *;
@use "pages/article";
@use "parts";
@use "layout/header-pc";
@use "layout/header-sp";

Layout, Parts, and Pages

The layout directory controls page-level and region-level structure, including the body, header, main area, sidebar, and footer. Layout files remain separated into PC and SP versions where the page structure differs. Mobile navigation is an SP-only exception provided by assets/scss/layout/_mobile-nav-sp.scss.

The parts directory contains reusable UI components and component-specific states. Each parts file should contain one component with one responsibility. Parts are shared across breakpoints, with responsive differences kept in the component file. The pages directory currently contains assets/scss/pages/_article.scss, which provides shared styling for article and page content, including article elements and form button variants; it is not a directory of slug-specific styles. Slug-specific styles are a separate exception, loaded from assets/css/singular/{slug}.css only when a matching file exists for the current singular post slug.

  • layout/: page-level and region-level structure split into PC and SP files.
  • parts/: reusable UI component styles, including common output and responsive mixins where needed.
  • pages/_article.scss: shared styling for article and page content; it is not a slug-specific stylesheet directory.

Common and Responsive Output

SCSS Parts use three output patterns. Common-only modules, such as breadcrumb, emit shared styles when loaded through the parts index. Mixin-only modules, including drawer-button, header-contact, and header-logo, define device-specific mixins and are loaded directly by the responsive entry points. Modules such as page-top, post-list, share, sns-links, and table-of-contents provide common output together with responsive mixins.

Each Sass entry point loads its modules independently because each produces a separate stylesheet. style-common.scss loads shared Parts through @use “parts”; style-pc.scss and style-sp.scss load the responsive modules directly and include their desktop or mobile mixins. For Parts with common output, the responsive entry points set the corresponding emit flag to false before including a device mixin, keeping common rules in the common stylesheet instead of emitting them again.

@use "parts";
@use "parts/post-list" with ($emit-post-list-common: false);

@include post-list.post-list-desktop;
@use "parts/post-list" with ($emit-post-list-common: false);

@include post-list.post-list-mobile;

Sass Modules, Mixins, and Emit Flags

IM Base uses Sass modules to keep shared and responsive styles separate. The common entry point loads the Parts index with @use “parts”;, and assets/scss/parts/_index.scss makes Parts available with statements such as @forward “pager”;. A module’s basename supplies its namespace, so the desktop entry point can write @use “parts/page-top” with ($emit-page-top-common: false); followed by @include page-top.page-top-desktop;. For a Part that has both responsive variants, style-pc.scss includes @include post-list.post-list-desktop;, while style-sp.scss includes @include post-list.post-list-mobile;.

Mixin-only Parts do not emit common CSS. For example, style-pc.scss loads @use “parts/drawer-button”; and includes @include drawer-button.drawer-button-desktop;, while style-sp.scss includes @include drawer-button.drawer-button-mobile;. Parts with common output and responsive mixins define an emit flag with a default, such as $emit-post-list-common: true !default;, then conditionally include the common mixin with @if $emit-post-list-common { @include post-list-common; }. The five Parts that currently define emit flags are page-top with $emit-page-top-common, post-list with $emit-post-list-common, share with $emit-share-common, sns-links with $emit-sns-links-common, and table-of-contents with $emit-table-of-contents-common.

@forward "pager";
$emit-post-list-common: true !default;

@if $emit-post-list-common {
    @include post-list-common;
}
  • page-top uses $emit-page-top-common.
  • post-list uses $emit-post-list-common.
  • share uses $emit-share-common.
  • sns-links uses $emit-sns-links-common.
  • table-of-contents uses $emit-table-of-contents-common.

Adding and Customizing Styles

Edit the desktop header layout in assets/scss/layout/_header-pc.scss. Edit shared article content styles and button rules, including the default, imb-button-sub, and imb-button-cancel variants, in assets/scss/pages/_article.scss.

Keep a Mobile-only component difference in that Part’s mobile mixin and include the mixin from assets/scss/style-sp.scss. To add a shared Part, create a file under assets/scss/parts/, register it in assets/scss/parts/_index.scss with an @forward entry, and load shared Parts through @use “parts”; in assets/scss/style-common.scss. For styles limited to one singular post slug, add assets/css/singular/{slug}.css; it is loaded only when a matching file exists for the current singular post slug. Edit SCSS sources first and synchronize the generated CSS under assets/css/.

  • Change the Desktop header structure in assets/scss/layout/_header-pc.scss.
  • Change the current shared article and form button rules in assets/scss/pages/_article.scss.
  • Keep a Mobile-only component difference in that Part’s mobile mixin and include it from style-sp.scss.
  • Add a shared Part under assets/scss/parts/, then add its @forward to assets/scss/parts/_index.scss.
  • Add a singular page stylesheet as assets/css/singular/{slug}.css when the change belongs to one singular post slug.

Generated CSS and Page-specific CSS

Prepros processes SCSS files under assets/scss/ with Dart Sass and Autoprefixer. Its configured output replaces the scss path segment with css and changes the extension to .css, so the standard entry points produce assets/css/style-common.css, assets/css/style-pc.css, and assets/css/style-sp.css. Edit the SCSS sources first, then compile and synchronize the corresponding generated files under assets/css/; do not make standalone changes only to generated CSS.

Slug-specific styles use a separate optional convention. For singular content, IM Base checks for assets/css/singular/{slug}.css, where {slug} is the current post slug, and loads the stylesheet only when that matching file exists.

  • Edit SCSS sources first and synchronize the corresponding generated CSS under assets/css/.
  • Prepros maps the scss path segment to css and changes the extension to .css.
  • assets/css/singular/{slug}.css is loaded only when a matching file exists for the current singular post slug.