※Shopifyテ，マでのSassの利用は非推奨になりました。詳しくはこらのブログをご参照ください。
CSSが複雑になり,スタイルシートが肥大化してメンテナンスもむずかしくなるにつれ,CSSプリプロセッサがポピュラ，になってきました。CSSプリプロセッサは，コ，ドの再利用に関する問題解決のために作られ，開発をシンプルにするための抽象化を実現します。これらのプリプロセッサは，CSSカスタムプロパティの作成により，CSSという言語自体に変化をもたらしました。
この記事はシリ，ズの初回にあたります。シリ，ズ全体を通して，Shopifyの萨斯使用にいて初心者の方に理解を深めてもらうガドを提供します。今回は，萨斯とSCSSの違い，変数とネストの解説，Shopifyのテ，マエディタにおける萨斯の制限などを扱います。
CSSプリプロセッサとは?
网络プロジェクトが以前より複雑化し巨大になってきた結果，CSSの限界が見えてきました。CSSは宣言型の言語であるため，抽象化やスタルシト内のコドの再利用が苦手です。このような制限を乗り越えるために，CSSプリプロセッサは誕生しました。
CSSプリプロセッサはスクリプト言語であり，CSSを拡張して通常のCSS構文にコンパ@ @ルされます。CSSプリプロセッサは，アプリまたはスクリプトのコンパ。このコンパ电子邮箱ラにより，CSSプリプロセッサの構文(どのプリプロセッサを使用するかによって異なります)は,ブラウザが読み取れる通常のCSS構文に置き換えられます。ブラウザが読み取れるのは従来どおりのプレ，ンなCSSだけ，という点に注意しましょう。
一般的なCSSプリプロセッサは，萨斯、少、手写笔などです。Shopifyでは萨斯(より具体的にいうとSCSS構文)を使用します。
萨斯はShopifyでCSSにコンパesc escルされ，ブラウザに反映されます。
萨斯とSCSSの違いは何?
CSSプリプロセッサの使用経験がないと，萨斯とSCSSにいての記事を読んでも違いが何なのかわからないと思います。この2つの用語は同じ意味で使われることが多く,簡単にいえば同じもの(つまり萨斯と呼ばれるプリプロセッサのこと)を指しています。
萨斯は,语法上很棒的样式表の省略形です。もっとも古いCSSプリプロセッサの1で，9年以上にわたってアクティブにサポ，トされています。萨斯はすべてのバ，ジョンのCSSと互換性があるため，利用可能なCSSラ@ @ブラリならどれでも使えます。
萨斯とSCSSのおもな違いはファ@ @ル拡張子と構文です。萨斯には2の構文があります。SCSSがその1で，时髦的CSSとも呼ばれ，CSSの拡張構文となります。SCSS構文を使用するファ@ @ルの拡張子は.scssです。萨斯のバジョンにおいてはSCSSは"新しいメ▪▪ン構文"として導入されました。
SCSSがそもそも存在する理由の1に，萨斯の導入を全面サポ，トすることが挙げられます。通常のCSSプロジェクトを萨斯プロジェクトに変換することは容易です。なぜなら，CSSは有効なSCSS構文だからです。
まり，CSSファ@ @ルの拡張子を変更するだけで有効なSCSSファ@ @ルが作れるわけです。萨斯を初めて使用するユ，ザ，にとってアプロ，チしやすいやり方なので，萨斯の人気はリリ，ス後に急上昇しました。
萨斯のもう1つの(古い)構文は,インデント構文または単に萨斯と呼ばれるものです。セミコロンで新しいプロパティを示すのではなく,新しい行の表示にインデントを使ったり,セレクタのネストを記述する際に括弧の代わりにインデントを使ったりするため,より簡潔なCSSの記述方法を提供します。萨斯構文を使うファ@ @ルの拡張子は.sassです。
萨斯とSCSSの両方の利点と歴史をまとめた記事もありますが，このシリ，ズではSCSS構文を取り上げます。
それでは，萨斯の機能にいて詳しく見ていきましょう!
萨斯ファ▪▪ルの作成とコンパ▪▪ルの準備
Shopifyで萨斯をコンパ▪▪▪ルする方法はいく▪▪▪かあります。コンパ▪▪ラの▪▪ンタ▪フェ▪▪スの有無は問いません。どらにしても下記のようなファル構造をセットアップする必要があります。
|资产
| -theme.css / /最終的にテマで利用するコンパル済みのCSS
|风格
|制造
|全球
| -…
|主题。SCSS //资产のtheme.cssにコンパ▪▪ルされるファ▪▪ル
スタ▪ルシ▪トの分割方法や選択した規則(本やSMACCなど)によって，ファreeル構成は多少異なります。重要なのは、すべてのコンポ、ネントを、ンポ、トするtheme.scssファ@ @ルが/资产ディレクトリのtheme.cssにコンパ@ @ルされ，テ@ @マの< >头にリンクされるということです。
{{'theme.css' | asset_url | stylesheet_tag}}
theme.scssは,资产/のディレクトリにコンパ@ @ルされる新しいCSSファ@ @ルの名前に当たります。
萨斯のコンパ▪▪ルに必要な手順に▪▪いては，以下のチュ▪▪トリアルを参照してください。
狼吞虎咽地吃を使った萨斯コンパ@ @ルをShopifyでおこなう方法
Shopifyパ，トナ，の五点起床によるこらのチュトリアルでは，Shopifyにおける狼吞虎咽地吃設定方法をカバ，しています。タ，ミナルを使い慣れている人向けです。
萨斯コンパ@ @ルのためのPreprosの設定をShopifyでおこなう方法
@ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @ @萨斯コンパ电子邮箱ルを好む場合は，Preposによる萨斯コンパ@ @ルのラ@ @ブリロ@ @ドをチェックしてください。
こらも参考にしてください:cssって何?ビギナ，向けのCSS入門ガ@ @ド
変数
変数は，スタ。変数をラベル付きボックスと捉えることもできるでしょう。ここに収納してある情報は，あとで名前を参照して引き出すことができます。萨斯では，＄が変数を示す記号です。
例：
$font-primary: Helvetica, Arial, sans-serif;
色原美元:# 333;
身体{
字体:normal 100%/1.5 $ Font -primary;
色:色原美元;
｝
萨斯が処理されると，変数の命名にかかわらず，変数に代入した値が通常のCSSとして出力されます。
コンパ电子邮箱ル後:
身体{
字体:正常100%/1.5 Helvetica, Arial, sans-serif;
颜色:# 333;
｝
変数を，値がセットされたプレ，スホルダ，と考えることもできます。セレクタ外で定義された変数は，グロ，バル変数として扱われます。セレクタ内で定義された変数は，セレクタ内にスコ，プされ，ロ，カルな変数として処理されます。
萨斯ファ@ @ル内で変数を複数回宣言しないよう注意する必要があります。一度以上宣言すると，値が上書きされることを知っておいてください。その変数が使用される前に最後に宣言された値が，有効な変数となります。萨斯はCSS同様に上から下へ順番に処理されます。
注意：CSSにはそれ自身の変数があり，萨斯の変数とは異なりますので，違いを理解しておきましょう!
ネスト(入れ子構造)
超文本标记语言には明確な入れ子構造とビジュアル的な階層が存在します。CSSには同じような階層は元々ありませんが，萨斯によって超文本标记语言と同様にセレクタを入れ子(ネスト)にすることが可能です。
ただしネストを多用しすぎると，過剰で細かすぎるCSSになってしまい，メンテも困難になる点に注意が必要です。これは一般にはバッドプラクティスと考えられています。経験的な目安として，2階層以上のネストは避けるべきです。それをあえてやるなら，それなりの理由があるはずです。
以上のことを頭に入れ，萨斯のネスト例を見てみましょう。
例：
nav {
ul {
保证金:0;
填充:0;
list-style:没有;
｝
李{
显示:inline-block;
｝
一个{
显示:块;
衬垫:0.5em 1em;
文字修饰:没有;
｝
｝
この例では，导航の中にul、李、一个がネストされています。こうした構成により，コ，ドが読みやすく，理解しやすくなります。
コンパ电子邮箱ル後:
导航{
保证金:0;
填充:0;
list-style:没有;
｝
导航{
显示:inline-block;
｝
导航a {
显示:块;
衬垫:0.5em 1em;
文字修饰:没有;
｝
上記例では要素セレクタを使用していますが，类名称や＃idなど，有効なセレクタであればほかのセレクタでも入れ替え可能です。
要素型のセレクタは上書きが困難になるので,要素セレクタよりもクラスセレクタを使用することをお勧めします。
萨斯の＆を活用する
萨斯の強力な機能の1に，＆があります。ネストのル，ルやパタ，ンを作る際に使用できます。萨斯の＆と変数にいての優れた記事がCSS技巧に掲載されていますが，ここではわたしが一番使えると思っているケ，スをご説明しましょう。
＆は，ネストの際にねに親セレクタを参照するものと考えてください。＆は削除されて親セレクタに置き換わるものと▪▪メ▪▪ジしましょう。さまざまなリンクステ，トのために擬似セレクタと共に使用されることが多いです。
例：
.button {
&:访问{
颜色:# 2980 b9;
｝
&:徘徊,
&:主动{
颜色:# 3498分贝;
｝
｝
コンパ电子邮箱ル後:
.button:访问{
颜色:# 2980 b9;
｝
.button:徘徊,
{.button:活跃
颜色:# 3498分贝;
｝
＆のもう1の有用なケスは，コンテクストに応じた限定をおこなう場合です。どういうことかというと，ネストされたセレクタは必ずしも＆で始まる必要がないのです。上述したように，＆はねに親セレクタを参照します。
例：
.button {
颜色:# ffffff;
background - color: # 2980 b9;
.page-contact & {
background - color: # e67e22;
｝
｝
ここでは親セレクタをまさに必要な場所に移動させています。こうすることでボタンにコンテクストがもたらされます。異なる親要素(この場合，page-contactクラス)に基づいてセレクタを限定する際に，とても有用な方法です。
コンパ电子邮箱ル後:
.button {
颜色:# ffffff;
background - color: # 2980 b9;
｝
.page-contact .按钮{
background - color: # e67e22;
｝
.buttonの色はデフォルトでブル，の# 2980 b9に指定されていますが，.page-contactのクラス内にある場合のみ明るいオレンジの# 2980 b9に変更されます。
@ShopifyPartnersのCodePenで,萨斯＆の使用例をご確認いただけます。
萨斯を始めよう
これであなたも今日から萨斯を使い始めることができます。変数とネストのアドバンテージだけ利用するのも好吧です。Shopifyセクションなどの機能をフルカスタマ@ @ズすることも可能です。萨斯の良いところは，使い始める際にすべての機能を理解している必要はないということです。これはCSSの拡張機能なので，あなたのワ，クフロ，に適した部分のアドバンテ，ジだけを利用することができます。
Shopifyパ，トナ，プログラムでビジネスを成長させる
マーケティング,カスタマイズ,またはWebデザインや開発など提供するサービスに関係なく,Shopifyパートナープログラムはあなたを成功へと導きます。プログラムの参加は無料で,収益分配の機会が得られ,ビジネスを成長させる豊富なツールにアクセスできます。情熱的なコマスコミュニティに今すぐ参加しましょう!
