Sass入門ガイド

watch 変更の監視とコンパイル

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
watchオプションを使うと、Sassファイルまたは複数のSassファイルを含むフォルダを監視し、変更が発生したら自動的にコンパイルしてくれるようになります。ここでは、その手順を紹介します。
講師:
08:03

字幕

watch オプションを使うとSass ファイル又は複数の Sassファイルを含むフォルダを監視し変更が発生したら自動的にコンパイルしてくれる様になります。このレッスンでは、その手順を紹介します。予めデスクトップにmy-sass というフォルダを作っています。このフォルダの中にはSass ファイルが 2 つ入っています。その 2 つを IDE で開いて確認してみましょう。1 つは screen.scssこの様な中身になっています。そして、もう 1 つは sub.scssこちらも中身は、この様になっています。ここでは、先ず screen.scss についてwatch オプションで変更を監視してみましょう。この screen.scss が含まれるフォルダの中でキーボードの Shift キーを押しながら右クリックを押して「コマンドウインドウをここで開く」を選びコマンドプロンプトを立ち上げます。Mac 環境の方はこの Sass ファイルが含まれるフォルダをターミナルのエイリアスにドラッグ & ドロップするとその場所が開けます。watch オプションを使ってみましょう。先ずS ass コマンドを入力しスペースを空けて記号のハイフンを 2 つ続けて入力します。 その後に watch と書き更に半角スペースを空けます。これが watch オプションです。watch オプションを付けてSass コマンドを実行するとそのファイルの変更を監視して変更が発生したら自動的にファイルをコンパイルしてくれる様になります。ここでは screen.scss を監視したいのでscreen.scss とファイル名を入力します。出力するファイル名はscreen.css にしたいためコロンで挟んで screen.css と入力します。これでコマンドを実行してみましょう。Explore にご注目ください。Enter キーを押します。Sass コマンドが実行されwatch オプションが付いたSass コマンドが実行されました。出力結果を見るとSass is watching for changes.とあります。これはSassファイルが変更に対して監視されているという意味です。又、合わせてwrite screen.cssというメッセージも表示されています。これは出力先の screen.css というファイルがなかったため予め出力しましたという意味です。Explorer を見ると先ほどはなかった screen.css が書き出されていることが分かります。 念のため screen.css の中身を確認してみましょう。この様に Sass ファイルに対応した新設ファイルが出力されています。一旦 CSS ファイルを閉じます。watch オプションを使うと引き続きファイルの変更は監視し続けられています。そのため、この状態でscreen.scss に変更が発生したらその変更を検知し再度、自動的に screen.css を書き出してくれます。screen.scss を変更してみましょう。Sass ファイルの中に新しくスタイルを追加します。するとコマンドラインにChange detected scrren.scssというメッセージが表示されました。これは、このscreen.scss というファイルに変更が検知されたという意味です。その下の Write screen.css はこの変更の検知と共に自動的に再度 CSS ファイルが書き出されたという意味です。それでは、この書き出されたCSS ファイルをもう 1 度開いて中身を確認してみましょう。ドラッグ & ドロップで開きます。すると Sass ファイルに追記したp 要素についてのセレクタがscreen.css にも追加されていることが分かります。 この様に watch オプションを使ってSass コマンドを実行し変更を監視させておくことでSass ファイルを書き換えると自動的にコンパイルが実行できる様にされます。尚、watch を止めるにはPress Ctrl C to Stopと書いてありますのでキーボードの Ctrl キーとShift キーを同時に押すと止まります。これは Windows でも Mac でも同じです。ここでは Ctrl C を押してみましょう。すると「バッチジョブを終了しますか」という質問が表示されました。ここでは Yes か No かで答えます。Yes の場合は YNo の場合は N を押してEnter キーを押します。ここでは終了なので Y を押してEnter キーです。これで watch オプションを使ったSass コマンドが終了しました。又 watch オプションを使うとフォルダ単位で変更を監視することもできます。試してみましょう。引き続き、この my-sass フォルダの中でコマンドを実行していきます。my-sass フォルダの中にはscreen.scss とsub.scss がありますので変更を監視すると、この 2 つのSass ファイルから同時に CSS ファイルが書き出されます。 フォルダに対してwatch オプションを実行するにはSass コマンドの後にwatch オプションを指定して変更を監視したいフォルダを指定します。現在は変更を監視したいmy-sass のフォルダの中でコマンドプロンプトを実行していますので現在地を意味する記号のピリオドを入力します。これで現在いるファイルを監視するという意味になります。更にコロンで挟んで出力したい場所を選びます。出力したい場合はやはり現在地にしたいので記号のピリオドを入力します。この様な形で指定すると現在いるフォルダに対して変更を監視しその中の Sass ファイルに変更が発生したら自動的にコンパイルが実行されるということになります。Enter キーを押してみましょう。すると先ほどと同じ様なメッセージが表示され今度は write sub.css というメッセージが表示されました。これは同じ様にsub.scss に対応するCSS ファイルがなかったため予め書き出されたということになります。それでは、この状態でsub.scss に対して変更を加えてみることにしましょう。sub.scss の中にCSS を追記します。変更が発生すると先ほどと同様に再度 CSS ファイルが書き出されていることが分かります。 この様にフォルダを監視すると複数の Sass ファイルを1 度にチェックし変更が発生したらコンパイルを自動的に行う様にできます。このレッスンでは Sassファイル又は複数の Sassファイルを含むフォルダを監視し変更が発生したら自動的にコンパイルしてくれる様にするwatch オプションについて学びました。

Sass入門ガイド

SassはCSSを効率的に書くための拡張言語です。Sassにはセレクタの入れ子、変数の利用や条件分岐などCSSだけでは実現できないパワフルな機能が数多く用意されています。これらの機能を使うことでCSSを記述するのに割く時間を大幅に減らすことが可能です。このコースではSassの導入方法からひと通りの機能を使いこなせるところまで順を追って解説します。

3時間41分 (43 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年10月16日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。