これからSassを始めたい人へ!導入手順をまとめてみた(Dreamweaver対応)

せいと


これからSassを始めたい人へ!導入手順をまとめてみた(Dreamweaver対応)

こんにちは。デザイナーのせいとです。
全く関係ない話ですが、ポケットモンスター X・Yが発売されたそうですね。「金・銀、ブラック・ホワイトときたら、次はパステルカラー辺りが来るはずや!間違いない!」と思っていた僕の予想はまんまと外れました。まあそれはいいとして、

今回はSassについてちょっと語らせていただきます。Sassというと、「効率、コーディングスピードが超上がるらしい」とか、「LINE株式会社、株式会社DeNAとかも採用してるらしい」という話を聞きます。僕もSassについては勉強しているんですが、当初はわかりにくい部分もありました。

それは「そもそもSassが何なのかよくわからない。プログラミング言語??」ってことと、「インストールが上手くいかない!コマンドプロンプト使い方わからない!Dreamweaver(以下DW)動かない!GUIソフトってなに!?」ってことです。

そこで今回は、初心者の方向けにSassをざっくり理解しつつ、短時間で使えるようにする方法を解説していきたいと思います。
ざっくりです。ざっくりなので、厳密にいうと間違ったことも言ってると思います。でもまあ、最初はとにかく触れるようになりましょう!

▼目次

参考にした書籍

『Sassの教科書』を参考にさせて頂きました。深く広く、わかりやすく書かれているので、Sassをもっと勉強したい方にはオススメです!ちなみに僕はこれを買った後、知り合いの方にプレゼントされて2冊持っています。

Sassの導入手順まとめ(Dreamweaver対応)

Step1. Sassってなに?

そもそもSassってなんでしょう。ざっくりいうと、すげえCSSです。CSSが孫悟空なら、Sassは孫悟空スーパーサイヤ人3みたいなもんです。
(※ちなみに、正確にはメタ言語っていいます。)

CSSの良いところは簡単かつ明確な点ですが、簡単ゆえにあまり複雑なことができません。プログラミング言語なら、変数とか演算を使って柔軟な命令ができますけど、CSSにはそれができない。そこで、CSSをもうちょっと便利にしようぜ!という発想からSassが生まれたようです。

Sassの使用例

今の段階ではまだよくわからないかもしれませんが、こんなことができるよってことだけ知っていただければと思います。

セレクタの入れ子
/*sass*/
.box{
	padding: 0 10px;
	h1{
		font-size: 18px;
	}
}

/*css*/
.box {
  padding: 0 10px;
}
.box h1 {
  font-size: 18px;
}

セレクタの入れ子ができれば超便利!記述が簡潔になり、後々メンテナンスがしやすくなります。

変数
/*sass*/
$blue:#23599b;

.box{
	color:$blue;
}

/*css*/
.box {
  color: #23599b;
}

カラーコードを変数で設定しておけば、「コーディングの際にいちいちカラーコードを覚えずに済む」「色を変えたい時に一括で変更できる」というメリットがあります。この他にも、Sassにはたくさんの便利な機能があります。

それらを駆使すれば、CSSを書くのが今よりも格段に効率よくなります!

Step2. Rubyをインストールしよう

Sassを使えるようにするために、まずRubyをインストールしましょう。SassはRubyがないと動かないのです。Macの人は標準で搭載されているはずなので、このステップを飛ばしてOKです。

ダウンロード先:RubyInstaller

↑のページから「上の方にあるでかいDownloadボタン → RubyInstallers内にある最新版(一番上、ないし上から二番目のリンク)をクリック」でインストールできます。
PCが64bitの方は(x64)と表記のあるリンクをクリックしてください。

このとき、「Rubyの実行ファイルへ環境PATHを設定する」にチェックをしてください!

sass_ruby_window

Step3. Sassをインストールしよう

次にSassをインストールします。SassのインストールにはRubyを使って行うため、アプリケーションをインストールするのとはちょっと勝手が違います。といってもやり方はすごく簡単!以下の通りに実行してみてください。

Windowsの場合

  1. スタート→アクセサリ → コマンドプロンプトを起動
  2. 「gem install sass」と入力してEnter
  3. 動くまでちょっと待つ
  4. インストール完了! ↓こんな画面になる

sass_command

Macの場合

  1. “アプリケーション”フォルダ → ”ユーティリティ”フォルダ → ターミナルを起動
  2. 「sudo gem install sass」と入力してreturn
  3. Mac OSのユーザーパスワードを入力してreturn
  4. ちょっと待つ
  5. インストール完了!(僕はWinユーザーなのでキャプチャ画面はありませぬ…)

Step4. GUIソフト「Koala」をダウンロードしよう

sass_koaka_web
続いてGUIソフトをインストールします。なんでこんなのが必要かというと、Sassで書いたものをCSSに手軽に変換(コンパイル)する必要があるからです。

ブラウザはCSSは理解してくれますが、Sassで命令してもわかってくれません。アメリカ人に日本語で話しかけているようなもんなのです。そこで、SassをCSSに変換する必要があります。ただ、普通にやろうとすると、先ほどのコマンドプロンプトやらターミナルやらを使う必要があり、なんか難しそうだし面倒くさくね?ってことで、これを簡単にしてくれるアプリケーションを使います。

今回は”Koala”というフリーのアプリを使って説明していきます。Koalaはめちゃめちゃ簡単でわかりやすいです!あとアイコンが可愛い(*´Д`)(一部からはキモいと言われてますが)

ダウンロード先:Koala

↑のページから「”Download”内のリンク → ”Windows” or “Mac” のリンクをクリック」でダウンロードできます。保存先は任意の場所へどうぞ。最新バージョンが好ましいですが、beta版は僕は使っていません。正式リリースされているものがいいかと思います。(2013年10月07日現在だと、v1.4.3)

ついで初期設定もしときましょう。今回は使いませんが、いずれ必要になるであろうcompassというシロモノをここで使えるようにします。左上の歯車のアイコンをクリックし、左側メニューの「Sass → compass」にチェック。また、左側メニューの「General → Language」から日本語モードにもできます。Koalaの詳しい使い方は後述します。

Step5. DreamweaverにSassを対応させる

DWをご使用の方は設定をいじくる必要があります。(DW以外の人は、この章はすっ飛ばしていただいてOKです。)ただし、DWはCCも含めてSassに完全対応していないため、この手順を行う場合は自己責任でお願いします。編集前にバックアップをとるなど、いつでも再インストールできる準備をしておくことをオススメします。

Sassを対応させる3ステップ

1.scssファイルを開けるようにする

Sassのデータは”.scss”という拡張子なのですが、初期状態のDWはscssファイルが何だかわかっていないので、一度頭に叩き込んで教えてやる必要があります。
そのために、以下のことを実行してみてください!

①メニュー → 編集 → 環境設定 → ファイルタイプ/エディターを開く
②右側の項目「コードビューで開く」に拡張子”.scss”を追記

2.コードヒントが出るようにする

初期状態のDWはscssファイルが何だかわかっていないので、そのまま編集してもcssのようにコードヒントを出してくれません。そのために、DW設定ファイルのMMDocumentTypes.xmlを編集します。コードヒントが出ないと不便ですよね。※DWで開くとアカンという噂を聞きました。念のため別のエディタをご使用ください。(僕はDWでいじっちゃいましたが…)

MMDocumentTypes.xmlの場所は、DWがインストールされているフォルダ内の”\configuration\DocumentTypes”にあります。以下の部分を書き換えてください。

<documenttype id="CSS" internaltype="Text" winfileextension="css" macfileextension="css" file="Default.css" writebyteordermark="false" mimetype="text/css" >

↓

<documenttype id="CSS" internaltype="Text" winfileextension="css,scss" macfileextension="css,scss" file="Default.css" writebyteordermark="false" mimetype="text/css" >

3.アイコンが真っ白いので変える

1、2の手順により、既にDWでもSassを扱えますが、このままだとscssファイルのアイコンが”不明なファイル扱い”になってしまうので、気になる方は変えましょう。修正するにはDW設定ファイルのExtensions.txtを編集します。

Extensions.txtの場所は、DWがインストールされているフォルダ内の”\configuration”にあります。以下の2箇所を書き換えてください。”CSS,”の後ろに”SCSS”を加えるだけです。

HTM,HTML,SHTM,SHTML,HTA,HTC,XHTML,STM,SSI,JS,JSON,AS,ASC,ASR,XML,XSL,XSD,DTD,XSLT,RSS,RDF,LBI,DWT,ASP,ASA,ASPX,ASCX,ASMX,CONFIG,CS,CSS,CFM,CFML,CFC,TLD,TXT,PHP,PHP3,PHP4,PHP5,PHP-DIST,PHTML,JSP,WML,TPL,LASSO,JSF,VB,VBS,VTM,VTML,INC,SQL,JAVA,EDML,MASTER,INFO,INSTALL,THEME,CONFIG,MODULE,PROFILE,ENGINE,SVG:All Documents

↓

HTM,HTML,SHTM,SHTML,HTA,HTC,XHTML,STM,SSI,JS,JSON,AS,ASC,ASR,XML,XSL,XSD,DTD,XSLT,RSS,RDF,LBI,DWT,ASP,ASA,ASPX,ASCX,ASMX,CONFIG,CS,CSS,SCSS,CFM,CFML,CFC,TLD,TXT,PHP,PHP3,PHP4,PHP5,PHP-DIST,PHTML,JSP,WML,TPL,LASSO,JSF,VB,VBS,VTM,VTML,INC,SQL,JAVA,EDML,MASTER,INFO,INSTALL,THEME,CONFIG,MODULE,PROFILE,ENGINE,SVG:All Documents
CSS:Style Sheets

↓

CSS,SCSS:Style Sheets

Step6. 実際にSassを使ってみよう!

さて、準備が整ったのでそろそろSassってみたいと思います。
試しに以下の手順を踏んでみてください!

  1. 任意の場所に”test”という名前でフォルダを作る
  2. その中にDWなりのテキストエディタで、”test.scss”というファイルをつくる
  3. Koalaを起動する
  4. testフォルダを、フォルダごとKoalaにドラッグ&ドロップ
  5. すると、右側にアイコンと共に”test.scss”の表記が出ます。
  6. 右側に何やら項目が表示されるので、任意で設定する。

sass_koaka_ui

※scssファイルを編集する際、コンパイルするアプリ(今回の場合はKoala)は常に開いた状態にしておかないと、CSSが吐き出されないので注意。

これでOKです!scssファイルをいじってみましょう。
試しに、以下のコードをtest.scssに記述してみてください。↓

.box{
	padding: 0 10px;
	h1{
		font-size: 18px;
	}
}

すると、scssファイルと同じディレクトリ内に”test.css”なるものが自動で作成され、↓のように吐き出されるはず!

/* line 14, ../sass/common.scss */
.box {
  padding: 0 10px;
}
/* line 16, ../sass/common.scss */
.box h1 {
  font-size: 18px;
}

これでSassの環境が整いました!!

※”/* line 14~”はcommon.scssの記述と対応している部分の表記です。
必要なければ、Koalaの右側メニュー”line comments”のチェックを外してください。

※今回はお試しなので、scssファイル、cssファイルしか用意しませんでした。
実務となると、フォルダ内にはhtmlやら画像やらjsやらも入ることになるかと思いますが、その場合でもフォルダ丸ごとKoalaにドラッグ&ドロップすれば、scssを認識してくれます!

step7. インストールでよくあるトラブルとその対処法

さて、これで無事に完了といけば問題ないのですが、上手くいかねーよ!という場合があるかと思います。導入の際に詰まりそうなポイントを以下にまとめましたので、参考にしてください!

Q.RubyとSassがちゃんとインストールされているのかわからん。確認する方法ある?

スタート → アクセサリ → ”コマンドプロンプト”を開いて、「gem -v ruby」と入力してみてください。Rubyのインストールが成功していれば、バージョンナンバーが表示されるはずです。sassを確認したい場合は、同様に「gem -v sass」と入力することで確認できます。

Q.DWの設定がうまくいってないみたいなんだけど

マイコンピュータを開いて検索ボックスから”MMDocumentTypes.xml”,”Extensions.txt”を検索してみてください。もし複数ヒットしたら、片っ端から書き換えてみてください。

Q.”MMDocumentTypes.xml”,”Extensions.txt”を編集しようとするとエラーになるんだけど

DWフォルダ内で直接書き換えようとするのではなく、一度デスクトップ等にコピーして、そちらを編集してみてください。それから再度、デスクトップからDWフォルダ内に移動させて上書き、その際に管理者として実行すれば編集できるはずです。

Q.Rubyのインストールは完了してるのに、Koalaが「Rubyがインストールされていません」っていうんだけど

一度Koalaを閉じて、再度Rubyをインストールすれば直ると思います。Koalaさん、使い勝手はいいけどちょっと変なところがあるっぽいです。

Q.Koalaが起動しない……

PCを再移動してみてください。Koalaさん、使い勝手はいいんだけどね…。変なところがね…。慣れてきたら別のGUIアプリを使ってみるといいかもしれません。Prepros( win & Mac ),CodeKit (Mac)辺りも使いやすいようです。

最後に

さて、これで最低限Sassが動く環境が整いました!しかしながら、Sassにはまだまだ素晴らしい機能が沢山あります。
特に、Compassはぜひともオススメしたい機能です。それについては、以下の記事が超参考になるので合わせて読んでみてください。

CSSの常識が変わる!「Compass」、基礎から応用まで!
Compassの設定ファイル「config.rb」の編集方法

せいと
この記事を書いた人
せいと

フロントエンドエンジニア

2012年入社

この記事を読んだ人におすすめ

こちらもおすすめ

Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語

Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語

  • 著者平澤 隆,森田 壮
  • 価格¥ 3,024(2015/11/10 16:23時点)
  • 出版日2013/09/13
  • 商品ランキング97,632位
  • 単行本(ソフトカバー)352ページ
  • ISBN-104844334662
  • ISBN-139784844334668
  • 出版社インプレスジャパン