※ShopifyテーマでのSassの利用は非推奨になりました。詳しくはこちらのブログをご参照ください。
CSSが複雑になり、スタイルシートが肥大化してメンテナンスもむずかしくなるにつれ、CSSプリプロセッサがポピュラーになってきました。CSSプリプロセッサは、コードの再利用に関する問題解決のために作られ、開発をシンプルにするための抽象化を実現します。これらのプリプロセッサは、CSSカスタムプロパティの作成により、CSSという言語自体に変化をもたらしました。
この記事はシリーズの初回にあたります。シリーズ全体を通して、ShopifyのSass使用について初心者の方に理解を深めてもらうガイドを提供します。今回は、SassとSCSSの違い、変数とネストの解説、ShopifyのテーマエディタにおけるSassの制限などを扱います。
CSSプリプロセッサとは？
Webプロジェクトが以前より複雑化し巨大になってきた結果、CSSの限界が見えてきました。CSSは宣言型の言語であるため、抽象化やスタイルシート内のコードの再利用が苦手です。このような制限を乗り越えるために、CSSプリプロセッサは誕生しました。
CSSプリプロセッサはスクリプト言語であり、CSSを拡張して通常のCSS構文にコンパイルされます。CSSプリプロセッサは、アプリまたはスクリプトのコンパイラを必要とします。このコンパイラにより、CSSプリプロセッサの構文（どのプリプロセッサを使用するかによって異なります）は、ブラウザが読み取れる通常のCSS構文に置き換えられます。ブラウザが読み取れるのは従来どおりのプレーンなCSSだけ、という点に注意しましょう。
一般的なCSSプリプロセッサは、Sass、Less、Stylusなどです。ShopifyではSass（より具体的にいうとSCSS構文）を使用します。
SassはShopifyでCSSにコンパイルされ、ブラウザに反映されます。
SassとSCSSの違いは何？
CSSプリプロセッサの使用経験がないと、SassとSCSSについての記事を読んでも違いが何なのかわからないと思います。この2つの用語は同じ意味で使われることが多く、簡単にいえば同じもの（つまりSassと呼ばれるプリプロセッサのこと）を指しています。
Sassは、Syntactically Awesome Style Sheetsの省略形です。もっとも古いCSSプリプロセッサの1つで、9年以上にわたってアクティブにサポートされています。SassはすべてのバージョンのCSSと互換性があるため、利用可能なCSSライブラリならどれでも使えます。
SassとSCSSのおもな違いはファイル拡張子と構文です。Sassには2つの構文があります。SCSSがその1つで、Sassy CSSとも呼ばれ、CSSの拡張構文となります。SCSS構文を使用するファイルの拡張子は.scssです。Sassのバージョン3においてはSCSSは『新しいメイン構文』として導入されました。
SCSSがそもそも存在する理由の1つに、Sassの導入を全面サポートすることが挙げられます。通常のCSSプロジェクトをSassプロジェクトに変換することは容易です。なぜなら、CSSは有効なSCSS構文だからです。
つまり、CSSファイルの拡張子を変更するだけで有効なSCSSファイルが作れるわけです。Sassを初めて使用するユーザーにとってアプローチしやすいやり方なので、Sassの人気はリリース後に急上昇しました。
Sassのもう1つの（古い）構文は、インデント構文または単にSassと呼ばれるものです。セミコロンで新しいプロパティを示すのではなく、新しい行の表示にインデントを使ったり、セレクタのネストを記述する際に括弧の代わりにインデントを使ったりするため、より簡潔なCSSの記述方法を提供します。Sass構文を使うファイルの拡張子は.sassです。
SassとSCSSの両方の利点と歴史をまとめた記事もありますが、このシリーズではSCSS構文を取り上げます。
それでは、Sassの機能について詳しく見ていきましょう！
Sassファイルの作成とコンパイルの準備
ShopifyでSassをコンパイルする方法はいくつかあります。コンパイラのインターフェイスの有無は問いません。どちらにしても下記のようなファイル構造をセットアップする必要があります。
|-assets
|-theme.css // 最終的にテーマで利用するコンパイル済みのCSS
|-styles
|-components
|-global
|- ...
|-theme.scss // assetsのtheme.cssにコンパイルされるファイル
スタイルシートの分割方法や選択した規則（BEMやSMACCなど）によって、ファイル構成は多少異なります。重要なのは、すべてのコンポーネントをインポートするtheme.scssファイルが/assetsディレクトリのtheme.cssにコンパイルされ、テーマの<head>にリンクされるということです。
{{ 'theme.css' | asset_url | stylesheet_tag }}
theme.scssは、assets/のディレクトリにコンパイルされる新しいCSSファイルの名前に当たります。
Sassのコンパイルに必要な手順については、以下のチュートリアルを参照してください。
Gulpを使ったSassコンパイルをShopifyでおこなう方法
ShopifyパートナーのUp At Fiveによるこちらのチュートリアルでは、ShopifyにおけるGulp設定方法をカバーしています。ターミナルを使い慣れている人向けです。
SassコンパイルのためのPreprosの設定をShopifyでおこなう方法
インターフェイスをもつアプリによるSassコンパイルを好む場合は、PreposによるSassコンパイルのライブリロードをチェックしてください。
こちらも参考にしてください：CSSって何？ビギナー向けのCSS入門ガイド
変数
変数は、スタイルシート全体で再利用できる情報をストアします。変数をラベル付きボックスと捉えることもできるでしょう。ここに収納してある情報は、あとで名前を参照して引き出すことができます。Sassでは、$が変数を示す記号です。
例：
$font-primary: Helvetica, Arial, sans-serif;
$color-primary: #333;
body {
font: normal 100%/1.5 $font-primary;
color: $color-primary;
}
Sassが処理されると、変数の命名にかかわらず、変数に代入した値が通常のCSSとして出力されます。
コンパイル後：
body {
font: normal 100%/1.5 Helvetica, Arial, sans-serif;
color: #333;
}
変数を、値がセットされたプレースホルダーと考えることもできます。セレクタ外で定義された変数は、グローバル変数として扱われます。セレクタ内で定義された変数は、セレクタ内にスコープされ、ローカルな変数として処理されます。
Sassファイル内で変数を複数回宣言しないよう注意する必要があります。一度以上宣言すると、値が上書きされることを知っておいてください。その変数が使用される前に最後に宣言された値が、有効な変数となります。SassはCSS同様に上から下へ順番に処理されます。
注意：CSSにはそれ自身の変数があり、Sassの変数とは異なりますので、違いを理解しておきましょう！
ネスト（入れ子構造）
HTMLには明確な入れ子構造とビジュアル的な階層が存在します。CSSには同じような階層は元々ありませんが、SassによってHTMLと同様にセレクタを入れ子（ネスト）にすることが可能です。
ただしネストを多用しすぎると、過剰で細かすぎるCSSになってしまい、メンテも困難になる点に注意が必要です。これは一般にはバッドプラクティスと考えられています。経験的な目安として、2階層以上のネストは避けるべきです。それをあえてやるなら、それなりの理由があるはずです。
以上のことを頭に入れ、Sassのネスト例を見てみましょう。
例：
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 0.5em 1em;
text-decoration: none;
}
}
この例では、navの中にul、li、aがネストされています。こうした構成により、コードが読みやすく、理解しやすくなります。
コンパイル後：
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 0.5em 1em;
text-decoration: none;
}
上記例では要素セレクタを使用していますが、classnameや#idなど、有効なセレクタであればほかのセレクタでも入れ替え可能です。
要素型のセレクタは上書きが困難になるので、要素セレクタよりもクラスセレクタを使用することをお勧めします。
Sassの&を活用する
Sassの強力な機能の1つに、&があります。ネストのルールやパターンを作る際に使用できます。Sassの&と変数についての優れた記事がCSS Tricksに掲載されていますが、ここではわたしが一番使えると思っているケースをご説明しましょう。
&は、ネストの際につねに親セレクタを参照するものと考えてください。&は削除されて親セレクタに置き換わるものとイメージしましょう。さまざまなリンクステートのために擬似セレクタと共に使用されることが多いです。
例：
.button {
&:visited {
color: #2980b9;
}
&:hover,
&:active {
color: #3498db;
}
}
コンパイル後：
.button:visited {
color: #2980b9;
}
.button:hover,
.button:active {
color: #3498db;
}
&のもう1つの有用なケースは、コンテクストに応じた限定をおこなう場合です。どういうことかというと、ネストされたセレクタは必ずしも&で始まる必要がないのです。上述したように、&はつねに親セレクタを参照します。
例：
.button {
color: #ffffff;
background-color: #2980b9;
.page-contact & {
background-color: #e67e22;
}
}
ここでは親セレクタをまさに必要な場所に移動させています。こうすることでボタンにコンテクストがもたらされます。異なる親要素（この場合、page-contactクラス）に基づいてセレクタを限定する際に、とても有用な方法です。
コンパイル後：
.button {
color: #ffffff;
background-color: #2980b9;
}
.page-contact .button {
background-color: #e67e22;
}
.buttonの色はデフォルトでブルーの#2980b9に指定されていますが、.page-contactのクラス内にある場合のみ明るいオレンジの#2980b9に変更されます。
@ShopifyPartnersのCodePenで、Sass &の使用例をご確認いただけます。
Sassを始めよう
これであなたも今日からSassを使い始めることができます。変数とネストのアドバンテージだけ利用するのもOKです。Shopifyセクションなどの機能をフルカスタマイズすることも可能です。Sassの良いところは、使い始める際にすべての機能を理解している必要はないということです。これはCSSの拡張機能なので、あなたのワークフローに適した部分のアドバンテージだけを利用することができます。
続きを読む
Shopifyパートナープログラムでビジネスを成長させる
マーケティング、カスタマイズ、またはWebデザインや開発など提供するサービスに関係なく、Shopifyパートナープログラムはあなたを成功へと導きます。プログラムの参加は無料で、収益分配の機会が得られ、ビジネスを成長させる豊富なツールにアクセスできます。情熱的なコマースコミュニティに今すぐ参加しましょう！
