/最終更新日:2019/06/30TechniqueCSSWEBデザイナーであれば1度は「Sass」という言葉を聞いたことがあるのでは?と思います。今回は「Sassには興味があるけどまだ導入できていない」、「そもそもSassって何?」という方向けに、Sassの入門的な記事を書いてみました。結論から先に言うと、初めてCSSを覚えた時のような新鮮な気持ちになり、コーディングがめちゃくちゃ楽しくなります。通常のCSSでのコーディングよりはるかに作業効率が向上しますので良いことづくし!導入しないのはもったいないです。StyleSheet」の略です。スタイルシートという意味です。名前ですでに「すごい」と謳っていますね。SassはCSSのメタ言語というもので、簡単に言うと「CSSをさらに拡張して、より効率的に書けるようにしたよ」ということです。Sassのメリット・デメリットなんでもそうですが、メリット・デメリットを理解した上で使うのが望ましいですね。メリット作業効率がアップするこれに尽きると言っても過言ではないです。作業効率がアップする理由を簡単にまとめると次のようになります。セレクタやプロパティのネストで記述量が減る一度定義したスタイルのセットを簡単に呼び出せる複雑なコードも再利用できる例として、サイトで何度も出てくるボタンのスタイルセットがあって、それを別のセレクタの中で呼び出して背景色だけ変える、なんてことも簡単にできます。メンテナンス性がアップするメンテナンス性がアップする理由を簡単にまとめると次のようになります。変数で値を使いまわすことができる四則演算ができる関数が使える例として、メインカラーやサブカラー、カラムの幅など、よく使うものを変数にしておくことで、たった1箇所の変数を書き換えれば、同じ変数を使っている部分の修正が全て済んでしまいます。本当はもっともっと便利な機能がたくさんありますが、今回は入門編なので内容を絞っていきます。デメリット環境の準備が面倒SassファイルはそのままではCSSとしてブラウザが認識できるものではありません。「コンパイル」という作業をして、CSSに変換してあげる必要があります。そのために必要なツールをインストールしないとならないのが難点です。これが面倒で導入しない方も多いです。最近ではフリーかつ強力なアプリが多数あり、ストレスもなくなりました。次の「Sassを使うには:環境の準備」で触れます。全ての人がSassを導入しているわけではない私が思う最大のデメリットです。公開まではこちらで作業をして、公開以降はクライアントでメンテをしていくなんて場合も多いでしょう。逆も然りで、クライアントの既存サイトを修正していくこともあります。そんな場合、クライアント側がSassを導入していなければCSSを編集していくことになり、Sassは使えなくなってしまいます。こちらも諦める前に運用方法でカバーできることもあります。クライアント用に修正用のCSSを用意して、修正のスタイルはそちらに書いていってもらうことでSassが使えなくなってしまうことを防ぐことができます。デメリットも紹介しましたが、そんなもの吹っ飛ばすほどメリットの方が大きいので、くじけずに挑戦していきましょう。使い方を見ていきます。Sassを使うには:環境の準備Sassを使うには、Sass自体を編集する「エディタ」と、コンパイルしてCSSを吐き出すための「コンパイラ」が必要です。Macユーザーはデフォルトで「Rudy」が入っているので、「Brackets」などのエディタであれば、Sassを保存しただけで自動でCSSをコンパイルしてくれるので、コンパイラは不要な場合が多いです。Winユーザーは「Rudy」のインストールが必要でちょっと面倒なんですが、GUIコンパイラをインストールすれば「Rudy」のインストールは必要なく簡単にコンパイルできます。それぞれ見ていきましょう。「環境の準備が面倒」という方は、「まずはサクッとさわってみよう!」まで読み飛ばしてもらえば、オンラインでSassを試してみることができます。エディタSassに興味があるという人はすでにエディタをお使いでしょうが念のため。代表的なフリーのエディタは下記です。CodeAtom人それぞれで相性もありますので、使いやすいものを使いましょう。GUIコンパイラGUIコンパイラは面倒なコンパイルを簡単にやってくれるアプリです。こちらもフリーで使えるメジャーなものは下記になります。koalapreproskoalaでやってみます。シンプル・直感的なアプリです。Sassファイルがあるフォルダをここにドラッグ&ドロップするか、画面左の「+」をクリックしてフォルダを選択するとファイルが表示されます。これだけで準備はOK!これでkoalaを立ち上げている間は、表示されているSassファイルに変更が加えられると自動でCSSをコンパイルしてくれるというものです。次に設定を見ていきます。アウトプットスタイルSassファイルを選択すると画面右にオプションが表示されます。Map」にチェックが入ってますが特に必要でなければ外しておきましょう。アウトプットスタイルはCSSをコンパイルする際にどのようなスタイルにするかを設定します。Style:」のプルダウンで選択できます。それぞれのスタイルを見ていきましょう。}Sassのネストをそのまま活かしたスタイルです。}セレクタとプロパティを1行にします。img{display:block}改行や空白をとってCSSを圧縮します。block;}通常のCSSのスタイルにします。ちなみに、先ほど紹介したエディタ「Brackets」では、アウトプットスタイルはnestedとcompressedのみになります。この辺りもエディタによって違うので、選ぶ判断基準になりますね。Sassの書き方Sassには「SASS記法」と「SCSS記法」という2種類の書き方があります。ファイルの拡張子もそれぞれ「◯◯.sass」、「◯◯.scss」になります。ややこしいですが、実際のコードで見ていきましょう。block;}SASS記法ではCSSでおなじみの「{}」がありません。代わりにインデントを使います。プロパティの後の「;」もありません。シンプルなコードになっています。実はこちらのSASS記法が最初に作られたのですが、上記の通りあまりにもCSSでの記述と違うため、とっつきにくい印象であまり浸透しませんでした。CSSとの互換性もなく、通常のCSSルールで記述するとコンパイルエラーになってしまいます。そこで登場したのが次の「SCSS記法」です。block;}}}※コンパイル後は省略SCSS記法は「{}」もあり、プロパティの後の「;」もあります。SCSS記法ではCSSと互換性があり、通常通りのCSSを書いてもコンパイルエラーにはなりません。ほとんどCSSと同じ記述になっていてわかりやすいですね。いうことで、現在ではSassといえばSCSS記法が主に使われています。この記事でもSCSS記法で進めていきます。さわってみよう!環境の準備は面倒だけど体験版感覚でちょっと試してみたい方にオススメなのが「SassMeister」です。オンライン」などで検索すると色々な方がこのSassMeisterを使い方も含めて紹介してくれています。実際の画面が下のイメージになります。シンプルな画面ですよね。試しに先ほどSCSS記法のところで、私がサンプルで書いたコードをまるっとSassMeisterの左の画面にペーストしてみましょう。ほんの1、2秒でコンパイル結果が右の画面に出ました。いうことで、環境の準備ができた方はそちらでやっていただいてもOKですし、面倒な方はぜひSassMeisterを使ってやっていきましょう。セレクタのネストいよいよやっと実践的なことをやっていきます。セレクタのネストはすでにコードを記載しているので、イメージがついているかと思いますが、Sassではセレクタの中でさらにセレクタを書くとネストすることができます。block;}いちいち「ul」から書かなくてすみ、記述量をかなり減らすことができます。プロパティのネストセレクタと同じようにプロパティもネストすることができます。プロパティをネストする場合は「{」の前に「:」をつけます。20px;}親の参照「&」ネストでは必ず親との間に半角スペースが入り、子セレクタになります。「:hover」を書きたい時に、次のように書くとエラーにはなりませんがCSS的にはおかしくなってしまいます。underline;}「a」と「:hover」の間に半角スペースが入ってしまいました。いうことで、親セレクタを参照し半角スペースなしで指定するには「&」を使います。underline;}半角スペースなしで「a」の後に「:hover」が入りました。CSS設計との相性が良いです。次のようなBEMでの命名規則のクラスがあったとします。alt=""></li></ul>このCSSをSassで書くと次のようにできます。block;}BEMでのCSS設計はクラス名が長くなりがちですが、これならかなり記述量を減らすことができます。変数を使う「$」ここからはよりプログラミングっぽくCSSを書いていきます。変数を使うには変数名の頭に「$」を使います。$mainColor;}変数名の後に「:」で値を代入します。javascriptなどでは変数は「=」で代入しますが、Sassでは「:」なので注意しましょう。#002e73;}変数を定義している行はCSSには吐き出されません。変数の箇所がCSSでは値に置き換わっていますね。前述しましたが、サイトのメインカラーを変更したいなんて場合に、CSSではメインカラーを指定している箇所を1つずつ修正する必要がありますが、変数を使っていれば1箇所の修正で済んでしまいます。代表的な変数の例カラーコード背景色やフォントのカラーなど、一番多く出てくる指定と言っても過言ではないカラーコードの指定を変数にすることは相当メンテの上でメリットがあります。カラムの幅カラムの幅もレイアウト上ではよく使いますので変数にしておくといいでしょう。$col3;}ブレイクポイントレスポンシブレイアウトがほぼ当たり前となった今では、ブレイクポイントもとても多く出てくるでしょう。変数にしておけば、「スマホのブレイクポイントを変えたい」なんて場合も一発です。私の例ですが、iconfontのフォントファミリーの指定を、いつもコピペでやっているのでなかなか覚えられず、違うところで指定している箇所を探して改めてコピペする、なんて不毛なことをよくやってましたが、変数なら自分の覚えやすい名前で管理できるのもメリットです。演算は、当たり前ですが数値を計算して値を指定したい場合に便利です。20%;}SassでのコメントSassでは「//」の1行コメントはコンパイル時に全て削除されてしまいます。*/」を使いましょう。20%;}複数行コメントのみ残りましたね。まとめSass入門、いかがだったでしょうか?Sass便利さ、作業効率の良さがわかるとチャレンジしたい気持ちも上がって来ますね。お伝えしたい素晴らしい機能がありますので、次は応用編を書いていきます。MORE【HTML・CSS・jQuery】フルスクリーンナビゲーションを作る。Day.GALLERYINSPIRATIONCONTACTTGIC。