Shopifyでは、マーチャントと開発者コミュニティのために、テーマ開発体験を向上させるべく努めています。最近は、Reactによるテーマエディターの再構築とIE11サポートの終了などが実行されました。
こうした改善の一環として、Sassの廃止が決まりましたが、これはストアフロントでのユーザーエクスペリエンスの向上と、将来的な進化の準備を目的としたものです。短期的にはSassはShopifyテーマで利用可能ですが、わたしたちは積極的にテーマをCSSのみ使用するかたちへと移行しています。
今回の記事では、Sassを使用しない方向に動いた理由と、開発者がネイティブなCSSによってカスタムテーマの機能を維持する方法について、見ていきます。また、開発のワークフローでSassを使いたい開発者のための代替手段も確認します。
Sassのマイナス面
ShopifyテーマからSassを除くという決定にはいくつかの理由があります。パートナーがShopifyでSassを使用するときに体験する大きな問題の1つは、レガシーバージョンを採用しているために最新の機能が利用できないという点です。Sassの現行バージョンにアップデートすると、テーマに重大な変更をもたらす可能性があります。またSassのメリットの多くは、モダンCSSで実行可能です。
メンテナンスの問題に加え、Sassを削除するとマーチャントがShopifyを扱う際に大幅なスピードアップになることがわかりました。ピュアなCSSのアプローチにした場合、スタイルシートのサイズに応じて、読み込み時間を数秒短縮できます。Liquid Sassスタイルシートの平均コンパイル時間が2,000msなのに対して、Liquid CSSスタイルシートの場合は300msです。
Sass版のDebutでテーマ設定を変更。
CSS版のDebutでテーマ設定を変更。編集は約1秒早く読み込まれます。
Sassの使用は、テーマ設定をエディターやAPIで更新した場合のストアフロントの変更速度にも影響します。
どちらの場合でも、Sassはストアフロントとエディターの両方を遅らせ、マーチャントと購買者のユーザーエクスペリエンスを損ないます。テーマでCSSのみのアプローチに移行すると、マーチャントはテーマエディターで問題にぶつからず、ストアフロントへの反映も遅延なくおこなわれます。
さしあたり、.scssファイルを含むテーマは機能し、ストアフロントはSassを使用するテーマの影響を受けません。しかし、開発者のみなさんがSassからCSSに移行するか、.scssファイルをShopify外でコンパイルすることを強くお勧めします。その方法を記事の後半で扱います。
現在、スタイリングに.cssファイルを使用するよう無料および有料のShopifyテーマのアップデートをおこなっています。この実例を確認するには、CSSへの移行が完了した最新バージョンのDebut（Ver 17.4）をご覧ください。執筆時点では、Shopifyテーマストアの有料テーマのうち76％はすでにSassを使用していません。
比較的新しいCSSの機能を用いれば、Sass変数と同様の効果を生み出せるカスタムプロパティが使用できます（記事の後半で確認します）。カラーのスタイリングにSassを使っていた開発者は、LiquidカラーフィルターによってCSS文字列の変更や抽出が可能です。
こちらも参考にしてください： チェックサムによって改良されたテーマ開発ツールが利用可能に
ワークフローの調整
非推奨化によって完全にSassが使えなくなるわけではありません。Sassと.scssファイルは、プラットフォーム外のローカル環境でテーマをスタイリングするときには使用できます。ファイルはShopifyストアに送信する前にローカルでコンパイルされる必要があります。Shopifyストアで受け付けられるのは、.cssか.css.liquidファイルのみです。
.scssファイルをコンパイルして.cssファイルを作るためのオートメーションツールをワークフローで使うことができます。たとえば、GulpかWebpackを使用して、Shopifyストアにテーマファイルをデプロイする前に.scssファイルを.cssファイルに変換することが可能です。
さらに突き進めるなら、複数の.scssファイルをウォッチするためにGulpを設定し、Sassファイルに変更があったら、メインの.cssファイルが変更されるようにもできます。.scssファイルをコンパイルするためにこうしたオートメーションツールを使うことで、クライアントのストア速度をスローダウンさせることなくSassのメリットを得ることが可能です。CSS TricksのGulpビギナーズガイドでは、コンパイル自動化のアプローチをいくつか紹介しています。ワークフローを改善したいテーマ開発者にとって役立つ内容です。
または、テーマへのスタイル追加や適用に関して、単純にCSSをメインメソッドとして使用することも可能です。この結果、Sassの変数とヘルパーがスタイルシートから削除され、それを.scssファイルから.cssファイルに変換することになります。こうした変換の実例は、現行バージョンのDebutのtheme.cssファイルでご確認いただけます。
ネイティブCSS機能のメリット
IE11へのサポートがテーマの要件ではなくなったので、新しいCSSの機能を使うメリットはたくさんあります。
なかでもCSSカスタムプロパティ（CSS変数）のサポートが追加されたことは重要です。開発者はプロパティを定義してスタイルシートで再利用できます。構文のちょっとした違いはありますが、CSS変数はSass変数と同じように機能します。JavaScriptへの依存を少なくできると同時に、開発者はすっきりしたCSSを書くことが可能になります。
CSS変数はグローバルなLiquid設定オブジェクトにもアクセスできます。基本的な例を確認するために、DebutがどのようにCSS変数を活用しているか見てみましょう。
Debutでは、すべてのCSS変数はtheme.liquidの<head>で定義されています。たとえば、プライマリーボタンのカラーは次のとおりです。
:root {
--color-btn-primary: {{ settings.color_button }}
--は、ここでCSS変数が作成されていることを示します。この例では、--color-btn-primaryはsettings.color_buttonオブジェクトを表すものとして使用され、テーマエディターのオプションになります。--color-btn-primaryがスタイルシートの値として採用されると、マーチャントがテーマエディターで選択したカラーが要素に適用されます。
.btn, .shopify-payment-button {
color: var(--color-btn-primary-text)}
CSS変数の使用法については、 Mozilla開発者ドキュメントに詳しい情報があります。
CSS変数を採用することで、不要な依存関係をワークフローから削除することも可能になります。たとえば、スタイルシートのカスタムプロパティを検出してLiquid変数に置き換えるSlateのCSSVar Loaderプラグインなどが該当します。ネイティブなCSSの機能を活用すれば、テーマと開発ワークフローの両方を最適化できるでしょう。
CSSグリッドのクラスをカスタムしてテーマで利用することもあると思いますが、SassをやめることがCSSグリッドを実装するいい機会になるかもしれません。CSSグリッドはより少量のコードによってページのレイアウトデザイン作業をシンプルにしてくれます。
テーマのエクスペリエンスが向上する
カスタムテーマをCSSモデルに切り替えることで、安定した体験をクライアントに提供できると同時に、古いSassの制限事項を取り除くことができます。Sassの廃止によって、テーマはよりスリム化し機能性が高まるのです。
続きを読む
Shopifyパートナープログラムでビジネスを成長させる
マーケティング、カスタマイズ、またはWebデザインや開発など提供するサービスに関係なく、Shopifyパートナープログラムはあなたを成功へと導きます。プログラムの参加は無料で、収益分配の機会が得られ、ビジネスを成長させる豊富なツールにアクセスできます。情熱的なコマースコミュニティに今すぐ参加しましょう！
