Sass入門ガイド

Windowsで開発する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Windows環境でSassをコンパイルしてみましょう。ここでは、必要なソフトウェアのインストール手順と、基本的なコマンドの使い方について紹介します。
講師:
10:57

字幕

Windows 環境でSass をコンパイルしてみましょう。このレッスンでは必要なソフトウエアのインストール手順と基本的なコマンドの使い方について紹介します。Windows 環境で Sass をコンパイルするにはプログラミング言語であるRuby のインストールとSass 本体のインストールが必要になります。Ruby はrubyinstaller.orgというサイトからダウンロードしてインストールすることができますがその前に既に自分のマシンにRuby がインストールされているかどうかをチェックしてみましょうこの確認にはコマンドプロンプトというコマンドを入力して何かを実行するインターフェースを利用します。コマンドプロンプトはSass のコマンドの実行等でも使えますので起動方法を覚えておいてください。コマンドプロンプトを起動する手段は幾つかありますが一番シンプルな方法をご紹介します。キーボードの Windows キーとR キーを同時に押します。するとデスクトップに「ファイル名を指定して実行」というダイアローグが表示されます。これは、その PC ファイルに含まれる実行ファイルの名前を指定して実行するための機能です。 コマンドプロンプトを起動するにはアルファベットでcmd と入力しOK ボタンをクリック又は Enter キーを押すとコマンドプロンプトが起動します。終了するには右上の閉じるボタンで閉じることができます。スタートボタン等からコマンドプロンプトを起動することもできますがこの Windows R キーを使う手段が一番早く起動できますので覚えておきましょう。それではコマンドプロンプトを起動してRuby がインストールされているかどうかを確認します。Ruby がインストールされているかどうかの確認にはRuby コマンドを使います。Ruby コマンドを使うにはアルファベットでruby と入力します。そしてそのオプションに半角スペースを開けて-v と入力します。このコマンドを実行するとRuby コマンドを使って-v のオプションつまりバージョンを表示するということが実行できます。コマンドの実行は Enter キーを押します。それではこのコマンドを実行してみましょう。するとruby というコマンドがこの PC では使えないという旨のエラーメッセージが表示されました。これは、つまりこの PC に Ruby がインストールされていないことを示しています。 このエラーメッセージではなくRuby のバージョン番号が表示された場合は既に Ruby がインストールされています。それではこの PC に Ruby をインストールしていきましょう。一旦コマンドプロンプトを閉じます。Web ブラウザでrubyinstaller.org を開きます。ダウンロードボタンから最新バージョンの Ruby のインストーラーをダウンロードします。通常は一番上の最新のバージョンの Ruby をダウンロードすれば良いでしょう。尚 Ruby のインストーラーには32 ビット版と64 ビット版がありますのでお使いの OS に合わせてビットを選んでください。この PC は 64 ビットですので最新版の 64 ビット版をダウンロードしてインストールします。ここでは予めインストーラーをダウンロードしておきましたのでそちらのインストーラーを使います。Web ブラウザを少し小さくしてデスクトップに予めダウンロードしておいたRuby のインストーラーを起動します。セットアップは通常通り進めていきますがこのインストール先とオプションの指定は重要なポイントです。Windows 環境に Ruby をインストールする時にはこのオプションの中の真ん中にある「Ruby の実行ファイルへ環境変数、パスを設定する」ここにチェックボックスを入れるようにしておいてください。 ここにチェックが入っていない場合コマンドプロンプトからRuby を実行することができませんので注意してください。真ん中の、この部分にチェックボックスを入れたらそのままインストールを進めます。只今インストール中です。インストールが完了しました。完了ボタンをクリックして再度コマンドプロンプトを開きます。キーボードの WindowsR キーを押して「ファイル名を指定して実行」のダイアローグを開きcmd を入力しEnter キーを押します。そしてもう一度Ruby のバージョンを確認するコマンドを入力してみましょう。Enter キーを押します。すると先ほどのエラーメッセージは表示されなくなりインストールした Ruby のバージョンが表示されました。これで Ruby のインストールは完了です。次に Sass 本体をインストールします。Sass 本体をインストールするにはRuby コマンドの様に別のコマンドを使います。使うコマンドは gem コマンドというコマンドです。gem とは Ruby に関係するパッケージやライブラリを管理するためのツールのことでこのコマンドを使って Sass をインストールすることができます。 gem コマンドの後に半角スペースを入れてinstallそしてもう一度半角スペースを入れてsass と入力します。このコマンドを実行するとSass をインストールすることができます。Enter キーを押します。ここから Sass のインストールが始まり自動的に Sass がインストールされます。しばらく、かかりますのでお待ちください。インストールが完了しました。それでは Sass がインストールできているかどうかRuby コマンドと同じ様にSass コマンドを使ってSass のバージョンを確認してみましょう。Sass のバージョンを確認するにはSass コマンドの後に a半角スペースを入れて -そして、Ruby コマンドと同じ様にv を入力します。Enter キーを押します。インストールされた Sass のバージョンが表示されました。これで Sass 本体のインストールも完了しました。Ruby と Sass 本体のインストールが完了しSass をコンパイルする準備ができました。それでは実際に Sass をコンパイルしてみましょう。一旦コマンドプロンプトを閉じます。デスクトップには予め作成しておいたSass ファイルがあります。 こちらを予め開いていたコードエディタで開いてみます。Sass ファイルの中にはボディ要素に対して背景色やh1 要素に対して文字色が指定されています。この Sass ファイルをコンパイルしてCSS ファイルを作成してみましょう。Sass ファイルをコンパイルするには先ずその Sass ファイルの場所でコマンドプロンプトを開く必要があります。コマンドプロンプトでコマンドを入力して特定のファイルの場所まで移動することも可能ですがここではもっと簡単な方法をご紹介します。コンパイルしたい Sass ファイルがある場所でキーボードの Shift キーを押しながら右クリックをします。するとコンテキストメニューの真ん中に「コマンドウインドウをここで開く」という普段表示されない項目が出てきました。この「コマンドウインドウをここで開く」を選択すると現在そのファイルが置かれている場所を前提としてコマンドプロンプトを開くことができます。コマンドプロンプトではそのコマンドを実行する場所が重要になります。コマンドを実行する場所はこの点滅しているカーソルの左側に表示されています。このパスと実行したいコマンドが合致していなければコマンドは正常に実行されませんので注意してください。 ここでは Sass ファイルが置かれているデスクトップを元にしてコマンドプロンプトを開きました。それでは実際に Sassファイルをコンパイルするコマンドを打ってみましょう。それでは実際に Sassファイルをコンパイルするコマンドを打ってみましょう。Sass ファイルをコンパイルするにはSass コマンドを使います。Sass コマンドはsass と入力して半角スペースを入力し先ず入力する Sassファイルつまりコンパイルしたい Sassファイルのファイル名を入力しています。ここでは screen.scss です。そして、それに続いて記号の:そして出力したい CSS のファイル名を入力します。ここでは同じ名前で screenそして拡張子は css という風に入力します。このコマンドを実行するとscreen.scss という Sass ファイルをSass コマンドを使ってscreen.css にコンパイルするという意味になります。それでは Enter キーを押して実行してみましょう。Sass コマンドが実行されCSS ファイルが出力されました。尚、合わせて.sass-cache というフォルダが作られています。 これは Sass をコンパイルする時に作られるキャッシュファイルが格納されるフォルダです。CSS の動作には全く関係しませんので無視してください。それでは出力された screen.css ファイルをコードエディタで開いてみましょう。screen.css を見るとscreen.scss の中身がコンパイルされCSS として出力されていることが分かります。この他にも Sass コマンドにはファイルやフォルダを監視して自動でコンパイルをしたり出力される CSS のフォーマットスタイルを指定したりと様々なオプションを利用することもできます。このレッスンではWindows 環境でSass をコンパイルするために必要なソフトウエアのインストール手順と基本的なコマンドの使い方について学びました。

Sass入門ガイド

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

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

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

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

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