Ver.2.12より、管理画面、及び全てのテーマで Dart Sass に移行します

この記事は公開日より2年以上経過しているため、現在の内容と異なる可能性があります。

---

いつも a-blog cms をご利用いただき、誠にありがとうございます。開発スタッフの森田です。

Ver.2.12より、管理画面、及び全てのテーマで Dart Sass に移行することになったため、経緯と以降の方法をお知らせいたします。
なお、現在CSSからスタイルをカスタマイズされている方々は以前と同じようにカスタマイズできますので、ご安心ください。この記事は今までSassを使ってカスタマイズされていた方々を対象に、具体的な実装をご案内しています。

なぜ Dart Sass へ移行するのか

公式ブログのFuture Plansの項目にて、LibSass のサポートは遅くとも2022年10月1日には廃止されるというアナウンスがありました。

---

Sassが@importを非推奨とすることと、新しいSassの機能を使用していくため a-blog cms の開発においても Dart Sass へ移行をおこないます。

ご利用中のテーマではそのままLibSassをお使いいただくことも可能ですが、新しいバージョンの a-blog cms 内のSassを使用時には記述がDart Sassに対応されていることと、今後Sassの公式でもDart Sassがメインになっていくことを考え、早めの移行をお勧めいたします。

移行時の変更

主な変更内容は @import ルールを使用していた箇所が @use及び@forwardへの変更になります。

これにより以下の作業が想定されます。

• Mixinや変数、関数の重複を回避する
• ファイル名が重複する場合は名前空間の指定

Mixinsや変数、関数を使用している際には移行する際に多少作業が必要になりますので、その点はご留意ください。

@useとは

@useルールは、他のSassスタイルシートからMixins、関数、変数を読み込むことができ、複数のスタイルシートのCSSをまとめて表示する機能です。

@useで読み込まれたメンバー（変数、関数、Mixins）は、カプセル化され読み込んだスタイルシートでのみ使用できます。

シンプルに利用する際には @use "<url>" のように記述して利用します。

// _variables.scssを読み込むときの例

@use "variables";

ファイル名で読み込んだ際は、そのファイル名が名前空間となります。そのため、以下のように使用できます。

@use "variables";

.button {
  color: variable.button-color;
}

名前空間はas節を使用して変更可能です。

@use "variables" as var;

.button {
  color: var.button-color;
}

変数がグローバルでは無くなったことにより、同じ変数名や、関数名、Mixins名を使用して上書きできなくなリました。

外部から変数を変更したい場合は、あらかじめ上書きできるようにしたい箇所に !default フラグを指定しておき、@useで読み込む際にwith節を使用して変更します。

// variables.scss

$button-color: red;

.button {
  background: $button-color !default;
}

@use "variables" with (
  $button-color: blue
)

詳しくは公式ドキュメントをご覧ください。

---

@forwardとは

@useでは読み込んだ変数やMixinsなどのメンバーしか読み込めませんが、@useルールと異なる点としては、階層の深いファイルで指定したメンバーも読み込むことができ、利用時には単一のエントリーポイントのファイルを読み込むことができます。

シンプルに利用する際には @forward "<url>" と記述して利用します。

// エントリーポイントのファイル global/common.scss

@forward "variables";
@forward "mixins";
@forward "functions";

@use "../global/common"

.button {
	background: $button-color; //コンパイルエラーになる
}

@forward "../global/common"

.button {
	background: $button-color; //コンパイルできる
}

@forwardを利用の際にもwith節を使用して外部から内容を変更することができます。

@forward "../global/common" with (
  $button-color: blue;
)

.button {
	background: $button-color; //blueが出力される
}

実際にa-blog cms のテーマ内で使用している記述では、acms.cssの内容を変更する際には下記のように利用します。

@forward "../../../../system/src/scss/global/variables" with (
    $unit-gutter : 20px,
    $entry-class : entry-style,
    $unit-margin-bottom : 30px,
    $acms-font: '../../../system/fonts/'
);

同じ変数名が存在するとエラーが起こるので、もし$unit-gutterなどを変数名で別途上書きをしている場合は、その記述を削除し、with節で変更内容を指定しましょう。

詳しくは公式ドキュメントをご覧ください。

---

移行手順

実際に、Site2020を移行した手順をご紹介します。

• Dart Sassへコンパイルするための環境を用意する
• ルートのscssファイルをforwardとuseで読み込む
• forwardで読み込んだ変数、関数、Mixinを整える
• useで読み込んでいるファイルに名前空間を反映する

Dart Sassへコンパイルするための環境を用意する

gulp、webpackなどでコンパイルする際は、node-sass モジュールではなく、 sass モジュールを使用してください。

$ npm i sass --save-dev

ルートのscssファイルを@forwardと@useで読み込む

// site.scss

@charset "utf-8";

// グローバルメンバーファイル acms.css兼用
@forward "global/acms-common";

// グローバルメンバーファイル siteテーマ専用
@forward "global/common";

// ベース
@use "base";

// パーツ
@use "animation";
@use "banner";
@use "button";

... 以下省略 ...

@importを使用時は変数やMixins、コンポーネント利用時にも利用していましたが、ここでは変数やMixins、関数は@forward、コンポーネントは@useを使用しています。

forwardで読み込む変数、関数、Mixinsを整える

a-blog cms の公式テーマでは、変数、関数、Mixins は全てのコンポーネントのファイルで参照しているファイルです。これらをまとめるacms-common.scssとcommon.scssを作成しています。

公式テーマではglobalディレクトリを新しく作り、下記のように設定しています。

• global/_acms-common.scss
• global/_common.scss
• global/mixins.scss
• global/variables.scss

// global/_acms-common.scss

@forward "../../../../system/src/scss/global/variables" with (
    $unit-gutter : 20px,
    $entry-class : entry-style,
    $unit-margin-bottom : 30px,
    $acms-font: '../../../system/fonts/'
);
@forward "../../../../system/src/scss/global/variables-fonts";
@forward "../../../../system/src/scss/global/mixins";

// global/common.scss

@forward "variables";
@forward "mixins";

Siteテーマの場合は、global/_mixins.scssでacms.cssの変数とMixinsを使用しています。そのため、ファイルの先頭に@useを使ってacms-common.scssを読み込んでいます。

こうすることによって、systemテーマ内のmixins.scssで指定しているfont-sizeのMixinsが利用可能になります。

// global/_mixins.scss

@use "../global/acms-common" as acms;

@mixin footer-sns-list($sns-color){
	... 省略 ...
	@include acms.font-size(19);
  ... 省略 ...
}

useで読み込んでいるファイルに名前空間を反映する

公式テーマでは、acms.cssの変数、関数、Mixinsに加えて、テーマが各自で持っている変数、関数、Mixinsを使用します。

どのファイルの変数、関数、Mixinsを使用しているのかわかりやすくするために名前空間を指定しています。

コンポーネントのファイルの先頭にて、@useでファイルを名前空間を指定して読み込みます。

以下の場合は、acms-common.scssのメンバーはacms、common.scssのメンバーはglobalという名前空間が割り振られています。

// scss/_base.scss
@use "global/acms-common" as acms;
@use "global/common" as global;

LibSass利用時は以下のような記述でしたが、この記述ではエラーが出てしまいます。さらに名前空間を指定する必要があります。

// LibSass利用時の記述
@use "global/acms-common" as acms;
@use "global/common" as global;

body {
	color: $text-color-base;
	font-family: $font-family;
	background: #FFF;
	@include font-size(14);
}

名前空間を指定した記述が以下になります。

// Dart Sass利用時の記述
@use "global/acms-common" as acms;
@use "global/common" as global;

body {
	color: global.$text-color-base;
	font-family: global.$font-family;
	background: #FFF;
	@include acms.font-size(14);
}

global.xxxとacms.xxx という記述が増えました。$text-color-base はglobal/_common.scss で指定したファイルから参照しており、名前空間をasでglobalと指定しているのでglobal.xxx、@include font-size(); はglobal/acms-commonから指定したファイルから参照しており、名前空間をasでacmsと指定しているのでacms.xxx を指定します。

ユニットのガターなどはsystemフォルダの変数を利用しているケースがあるかと思いますが、その時は以下のようにwith節を使用して@forward時に変数の内容を変更してください。

// global/_acms-common.scss

@forward "../../../../system/src/scss/global/variables" with (
    $unit-gutter : 30px,
    $entry-class : entry-style,
    $unit-margin-bottom : 30px,
    $acms-font: '../../../system/fonts/'
);
@forward "../../../../system/src/scss/global/variables-fonts";
@forward "../../../../system/src/scss/global/mixins";

acms.cssでは、$entry-class はacms-entryが指定されていますが、上記の記述ではentry-styleに変更しています。

まとめ

これらの変更はVer.2.12の各テーマおよび管理画面にて行う予定です。リリースまで今しばらくお待ちください。

また、Ver.2.12からはWebpackでコンパイルできる環境を各テーマで用意する予定です。nodeをマシンにインストールされている方であればターミナルまたはコマンドプロンプトに $ npm i とするだけで、テーマのスタイル、JSがコンパイルできます。

Ver.2.12についての詳しい情報は、9月10日、9月11日に行われる a-blog cms Training Camp 2021 Autumn にて公開する予定です。ご興味ある方は是非ご参加ください。

---