Sass入門ガイド

GUIアプリケーションで開発する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
コマンドラインを使い慣れていない場合、GUIアプリケーションでSassを使って開発することもできます。ここでは、いくつかのアプリケーションと、その中の1つであるKoalaでの開発手順について紹介します。
講師:
08:43

字幕

コマンドラインを使い慣れていない場合GUI アプリケーションでSass を使って開発することもできます。このレッスンではいくつかのアプリケーションとその中の 1 つであるKoala での開発手順について紹介します画面では Web ブラウザでSass の公式サイトを開いているところです。Sass の公式サイトはsass-lang.comというドメインで提供されています。Sass の公式サイトの「Install」というページにジャンプしてみましょう。この「Install』というページには下の方にSass をコンパイルできるアプリケーションの一覧が掲載されています。GUI アプリケーションでコンパイルをしてみたい方は対応OSや有料あるいは無料かという表記に従って自分の環境に合わせてソフトを選んで試してみてください。このレッスンではこの中からオープンソースで且つWindows 、Mac 、Linux の全ての OS に対応しているKoala というソフトの使い方を紹介します。Koala の公式サイトにジャンプしてみましょう。こちらが Koala の公式サイトです。Koala はSass 以外にもLESS やCoffeeScript といったコンパイル が必要な言語をGUI のインターフェースでコンパイルするためのアプリケーションです。 Apache ライセンスのオープンソースソフトウエアとして提供されていますので誰でも無料で使うことができます。初めて使う方はこのダウンロードボタンからインストーラーをダウンロードしてインストールしておいてください。インストールはウィザードに従って進めていけば特に難しい設定はありません。ここでは既に予めインストールしてデスクトップにショートカットを作っていますのでそのショートカットから起動してみます。Web ブラウザを少し小さくしてデスクトップに置いてあるショートカットからKoala を起動します。これが Koala のインターフェースです。Koala は他言語に対応しておりインターフェースも日本語に変更することができます。日本語に変更するにはこの設定ボタンをクリックして「一般」の「言語」の部分から日本語を選べば OK です。デフォルトでは English英語になっていますので日本語に変更すると良いでしょう。ここでは日本語の設定のまま話を進めます。Koala は先ほど紹介した通りSass 以外にも LESS やCoffeeScript 等様々な言語に対応しておりそれぞれのタブから様々な設定を行うことができます。 ここでは Sass の設定を行うのでSass のタブを開きます。簡単にオプションの説明をします。Default Options の項目から順に紹介していきましょう。一番上の Compass Mode はCompass という Sass を使ったフレームワークを使うかどうかです。Line Comments は書き出す CSS に行数のコメントを挿入するかどうかDebug Info はFirefox で特殊なノードを使ってデバックする時の情報を出力するかどうかUnix New Lines は書き出す CSS の改行コードをLF にするかどうかそしてアウトプットスタイルは出力する CSS のフォーマットを設定します。Koala には Sass の本体が内臓されており一番したの Libraries Version にはその内臓されているSass のバージョンが表示されています。Advanced Settings を使うと自分でインストールしたSass 本体を使うこともできますが通常はこのオプションは使いません。尚コンパイルには Ruby が必要になりますのでWindows 環境の方は予め Ruby をインストールしておいてください。 ここでは特に設定を変更せずOK ボタンをクリックします。それでは Koala を使ってSass をコンパイルしてみましょう。Koala で Sass をコンパイルするには先ず 1 つのフォルダにコンパイルしたい Sass をまとめる必要があります。ここではデスクトップにmy-project というフォルダを作り予め screen-scss というSass ファイルを用意してあります。Koala にこのフォルダを登録してみましょう。フォルダをドラッグ & ドロップしてこのアイコンの辺りにドロップします。すると my-project というフォルダがKoala のアプリケーションの中に登録されます。この一度登録したフォルダはKoala を終了させてもう 1 度起動しても残ったままです。画面の右側にはそのフォルダの中に入っているファイルが一覧されています。ファイルをクリックするとそのファイルのコンパイルの設定について右側で設定することができます。デフォルトでは「自動コンパイル」にチェックが入っておりこの screen.scss に変更があった場合自動的に CSS にコンパイルされるようになっています。 またチェックマークを外したり付けたりすることで自動でコンパイルをしたくない場合はチェックボックスを外して下にあるコンパイルボタンをクリックすることで手動でコンパイルすることもできます。ここでは自動コンパスをON にしておきましょう。デフォルトでは登録されたファイルと同じファイル名で拡張子を css に変えてCSS ファイルが出力されます。出力される CSS ファイルのファイル名を変えたい場合はこの CSS ファイルのファイル名の左横にあるアイコンをクリックしますすると名前と場所を変更するダイアローグが表示されますのでここで適当な名前に変更するとその名前で保存することができます。例えばここではtest.css と書いてSass ファイルと同じディレクトリに保存するとscreen.scss を自動でコンパイルした場合同じディレクトリにtest.css というファイルが出力されるという設定になります。ここでは screen.css というファイル名に戻しておきます。それでは予め用意していたこの screen.css というファイルをコードエディタで編集してみましょう。予めコードエディタを起動しておきましたのでここに screen.css ファイルをドラッグ & ドロップして開きます。 そして scree.css の中の CSS を変えてみましょう。ボディ要素にネストを押して適当に 1 番要素に対してcolor: red 等とスタイルを指定してみます。そして、この状態で変更を加えたscreen.css ファイルを保存するとKoala によって自動的にコンパイルが実行されscree.css ファイルができました。scree.css ファイルをテキストエディタで開いてみましょう。scree.css の中身を見ると先ほどの SCSS ファイルをコンパイルした結果が入っています。この様に Koala を使うことでGUI アプリケーションでSass ファイルを CSS ファイルにコンパイルすることができました。尚 GUI アプリケーションを使う時の注意点として例えば Koala ではSass をコンパイルする時に内臓しているコンパイラを使いますのでそのコンパイラのバージョンが最新の Sass のコンパイラのバージョンとは異なっていく場合があります。また GUI で用意されているオプションがSass の全てのオプションとは限りません。ソフトによってSass の利用できる機能に違いがあることに注意しましょう。 このレッスンではSacc を GUI でコンパイラできるいくつかのアプリケーションとその中の 1 つであるKoala での開発手順について学びました。

Sass入門ガイド

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

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

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

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

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