Sass入門ガイド

IDEと連携して開発する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
IDE(統合開発環境)、コードエディタの中には、Sassのコンパイル機能を備えているものもあります。ここでは、代表的なIDE、コードエディタの紹介と、その中の1つであるIntelliJ IDEAを使った開発手順について紹介します。
講師:
08:08

字幕

IDE統合開発環境やコードエディタの中にはSass のコンパイル機能を備えているものもあります。このレッスンでは代表的な IDE とコードエディタの紹介とその中の 1 つであるIntelliJ IDEA を使った開発手順について紹介します。Sass に対応しているIDE やコードエディタを幾つかご紹介しましょう。先ず WebStormPhpStormIntelliJ IDEA です。これら 3 つは所謂 IDE と呼ばれる製品です。IDE統合開発環境とはエディタやデバッカ等の複数の環境、機能を一まとめにして利用できる様にしたソフトウエアの開発環境のことです。英語では Integrated Development Environmentと言われその頭文字を取ってIDE と呼ばれます。WebStorm はhtml、CSS、JavaScript に対応したWeb 製作向けの IDE です。PhpStorm は更にそれの上位版でWebStorm に対してPhp 関連の機能が追加されています。最後の IntelliJ IDEA はこの WebStorm やPhpStorm 等を作っているJetBrains 社の IDE の中で最上位版といわれる所謂全部入りの IDE です。 また IDE の他にシンプルなコードエディタでもSass の機能を追加しているものもあります。例えば Sublime TextやBracketsBrackets の派生版であるEdge Code 等です。また商用製品としてAdobe の Dearmweaver CC 等もSass に対応しています。この様に Sass に対応しているIDE、コードエディタは様々な製品が存在しますがそれぞれの機能や費用を比較して自分に合ったものを選択すると良いでしょう。因みに私はこれからご紹介する IntelliJ IDEA を使っています。それでは、これからIntelliJ IDEA の機能を使ってSass をコンパイルする手順を公開しましょう。IntelliJ IDEA に切り替えます。画面は IntelliJ IDEA を起動して空のプロジェクトを作ったところです。ここで Sass ファイルを新規作成してみましょう。ファイルメニューから「New」新規ファイルを選択します。ニューダイアログが出てきましたのでここでファイルを選択します。新しく作るファイルの名前を入力します。ここでは screen.scssCSS 記法で作る Sass ファイルですので.scss という拡張子を付けてOK ボタンをクリックします。 screen.scss ファイルが作成されました。IntelliJ IDEA では、この様にSCSS ファイルや Sass ファイルを新規作成するとこの緑色のバーの様なものが出ることがあります。この緑色のバーにはこのファイルが SCSS ファイルであることとそれをコンパイルしてCSS ファイルにできるということを示しています。このあるファイルを監視して別のファイルに自動でコンパイルする機能をIntelliJ IDEA やWebStorm PhpStorm 等ではFile watcher と呼びます。ここでは「 Add watcher 」をクリックしてFile watcher 機能の設定画面を開きましょう。Add watcher をクリックします。Add watcher をクリックすると新しく File watcher を設定する画面が表示されました。この中の項目は自動で設定されていますので特にいじる必要はありませんが幾つか設定項目を確認しておきましょう。例えば「Watcher Settings 」File watcher の設定の中で「File type」というところではどのファイルを監視し自動的にコンパイルするかということを設定することができます。 ここでは SCSS 記法で書かれたSass ファイルを監視しますので「SCSS files」 が選ばれています。そして 3 つ目の項目「Program」 ではSCSS コマンドを実行するライブラリへのパスが入力されています。IntelliJ IDEA ではシステムにインストールされた Ruby やSass 本体を使用しますので事前に Ruby や Sass 本体をインストールしておいてください。尚 Mac の方はRuby はデフォルトでインストールされていますのでインストールする必要はありません。この「Program」の項目でSCSS コマンドを実行することで実際に Sass ファイルをコンパイルするという指定が行われています。4つ目の「Arguments」という設定項目では実際に SCSS コマンドやSass コマンドで使える引数を指定することができます。ここではデフォルトで様々なオプションが指定されています。特に編集しなければSCSS のファイル名と全く同じファイル名でCSS ファイルが自動的にコンパイルされます。ここでは特に設定を変更せずOK ボタンを押しましょう。これで File Watcher が登録されました。 実際に SCSS を編集してCSSフ ァイルをコンパイルしてみましょう。適当に Web ページの背景色を追加します。すると Project View のscreen.scss ファイルの左横に三角のアイコンが追加されました。このアイコンをクリックするとこの SCSS ファイルを自動で監視してFile Watcher 機能によってコンパイルされた CSS が出力されています。screen.css をダブルクリックで開いてみましょう。screen.scss の内容がコンパイルされて CSS として出力されています。試しに screen.cssも更にスタイルを追記してみましょう。ここではボディ要素の下にh1 要素があるとして文字色を設定します。自動で保存がされscreen.css ファイルを開くと特にコンパイルの実行という手段を経なくてもSass ファイルの内容がCSS ファイルとし出力されています。これが File Watcher 機能を使ったIntelliJ IDEA でのSass のコンパイル方法です。尚 File Watcher 機能やIntelliJ IDEA 、WebStorm 等でSass を扱うためにはプラグインがインストールされていることが必須です。 IDE の設定画面「File 」メニューから「Settings 」を開きその中にある「Plugins」という項目の中に「Sass」 という項目や或いは「File Watcher」という項目が正常にインストールされているかどうかを確認しておいてください。これらのプラグインがインストールされていないと機能は動作しません。勿論プラグインは無料ですのでインストールされていない場合は「Browse repositories」ボタンから該当のプラグインを検索してインストールしましょう。このレッスンではSass のコンパイル機能を備えているIDE コードエディタとその中の 1 つであるIntelliJ IDEA を使った開発手順について学びました。

Sass入門ガイド

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

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

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

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

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