(Macで)Sassのコンパイル、基本のアレコレをざっくりと。(Macで)Sassのコンパイル、基本のアレコレをざっくりと。(Macで)Sassのコンパイル、基本のアレコレをざっくりと。ツール【無料プレゼント】まだホームページは作らないで!このガイドブックを読み終えるまでは。いうテーマで、「ホームページを作る前に読んでおくと得する本」を書きました。無料で読む忘れてました。以前、「とりあえずSassを触ってみようよ!」的な記事を二本書いて、今回のはそれに続く内容となってます。『Sass』をサクッとブラウザで試すところまでやる。『Sass→Mac』へインストールする手順。スゴく便利だと噂のSass。試すには、いくつか新しい知識が必要です。その一つが「コンパイル」。聞き慣れない言葉に尻込みしちゃいそうですが、恐れるなかれ。いざやってみると、意外に簡単なことに驚きます。コンパイルとは?「Sassファイル」を「CSSファイル」に変換することです。Sassによって、今までのCSSにはなかった画期的な記述方法が可能になります。ネスト(入れ子)状にスタイルを記述できます。}}HTMLの構造通りに記述できるので便利。この書き方をブラウザは理解してくれません。CSS形式のファイルに「変換」する必要があります。この変換の一手間を「コンパイル」と呼びます。ターミナルを使うコンパイルするときは「ターミナル」を使います。(Macの場合で話してます。ユーティリティー」の中に。起動するとこんな画面が。この画面にコマンドを入力してコンパイルします。起動直後のターミナルが覗く場所はユーザーホーム。コンパイルしたいSassファイルが存在するディレクトリにターミナルを動かさなくちゃ行けません。ディレクトリを移動する簡単な方法ドックに見えるターミナルのアイコンに移動先のフォルダをドラッグ&ドロップ。場所をそこに、新たなターミナルの画面が開きます。/Users/websae/Documents/folder)が必要。コマンド「cd」と一緒に使います。パスを調べるのが初心者さんには若干難しい。慣れないうちは、この「フォルダをドロップ」する方法がおすすめです。上のが基本コマンドです。【input】にはSassファイルの名前を、【output】にはCSSファイルの名前を入力。【enter(return)】を叩けばコンパイルできます。}}こんなふうに記述したファイルを「style.scss」という名称で保存。場所はターミナルが今見てるフォルダの中です。Sassファイルの拡張子は「.scss」です。(もう一つ「.sass」もありますが、今回は置いときます)ターミナルに以下のコマンドを入力します。「style.scss」を「style.css」にコンパイルしなさい、という意味です。style.scss:style.cssコンパイル後「style.css」というファイルができました。「style.css」が存在していた場合は上書きされます。}Sassの記述がCSSに変換されたことが分かります。出力するスタイルを指定できる「−−style」のあと半角スペースを空けて「スタイル」を入力すると、CSSの記述スタイルを指定できます。一度「style.css」を開いてみます。