Sass入門ガイド

Macで開発する

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

ぜひご覧ください。

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

字幕

Mac 環境でSass をコンパイルしてみましょうこのレッスンでは必要なソフトウエアのインストール手順と基本的なコマンドの使い方について紹介します。Mac 環境で Sass をコンパイルするにはSass 本体のインストールが必要になります。Sass 本体の実行にはプログラミング言語のRuby と呼ばれるものが必要になりますがMac 環境ではデフォルトでRuby がインストールされていますので特にインストールする必要はありません念のためこの Mac でRuby がインストールされているかどうかを確認しましょう。Ruby がインストールされているかどうかやSass 本体のインストールにはCUI と呼ばれるキーボードからコマンドを入力して何らかの命令を実行するというユーザーインターフェースを使います。Mac 環境で CUI を使うにはターミナルというアプリケーションを使います。ここではデスクトップにターミナルのをエイリアスを作っていますがファインダーから起動する手順を試してみましょう。Finder のファイルメニューから「新規 Finder ウインドウ」を開きます。アプリケーションフォルダを開いてその中に「ユーティリティー」というフォルダがあります。 ユーティリティーフォルダをクリックするとこの中にターミナルがありますターミナルはよく使うアプリケーションですのでドックに登録するなどしておくと良いでしょう。ダブルクリックで起動します。これがターミナルの画面です。ターミナルでは使いたいコマンドをキーボードから入力して実行します。ここでは Ruby がインストールされているかを確認しますのでRuby コマンドを使います。キーボードから ruby 入力しました。そしてバージョンの確認にはこれに更に半角スペースを入力後記号の - とアルファベットの v を入力します。この ruby という文字列と半角スペース -vこれをセットにして実行することでRuby のバージョンを確認するという命令を実行することになります。コマンドの実行にはリターンキーを押します。Ruby コマンドが実行されこの Mac にインストールされているRuby のバージョンが表示されました。この Mac では Ruby の 2.0.0P247 というバージョンがインストールされていることが分かります。それでは続いて Sass 本体自体をインストールしましょう。Mac 環境で Sass 本体をインストールする時には管理者権限が必要になります。 管理者権限が必要なコマンドを実行する場合はコマンドの前にアルファベットで sudoという文字列を入力する必要があります。これに続いて Sass 本体のインストールのコマンドを入力していきます。Sass 本体のインストールにはgem コマンドを使います。gem とは Ruby に関係するパッケージやライブラリを管理するツールのことです。ここでは gem コマンドを使ってSass をインストールするので更に半角スペースを開けてinstall スペース sass と入力します。この様に書くことでgem コマンドを使って「Sass をインストールする」という命令が実行することになります。リターンキーを押して実行してみましょうここではパスワードを要求する画面が表示されました。これは管理者権限が必要なコマンドを実行したためです。ここに入力するパスワードはMac OS 自体のユーザーパスワードです。尚キーボードの入力中にもこのパスワードの右横のカーソルは全く反応しませんので注意してください。ここでは Mac OS のユーザーパスワードを入力します。入力が完了したらリターンキーを押します。自動的に Sass のダウンロードとインストールが行われますしばらく待ちましょう。 インストールが完了しました。Sass 本体がインストールできたら先ほどの Ruby コマンドと同じ様にしてバージョンを確認することができます。Sass コマンドを使ってバージョンを確認してみましょう。キーボードから sass スペース -v と入力してリターンキーを押します。するとこの Mac にバージョン 3.3.4 のSass がインストールされていることが確認できました。それでは実際にこのインストールされた Sass 本体を使ってSass をコンパイルしてみます。予めデスクトップにmy-sass というフォルダを作りそのフォルダの中にscree.scss というファイルを作っておきました。この screee.scss というファイルを開くとSCSS 記法で書かれた Sassファイルであることが確認できます。この Sass を CSS ファイルにコンパイルしてみましょう。一旦ファイルを閉じます。Sass ファイルのコンパイルにははやりターミナルを利用します。ここで重要になるのがコンパイルするファイルの場所です。コンパイルしたいファイルはこの may-sass というファイルの中に入っていますのでターミナルでその場所を指定してあげる必要があります。 コマンドを入力して場所を移動することもできますがここでは簡単な方法でmy-sass というフォルダの場所をターミナルに与えてみましょう。コンパイルしたい Sass ファイルが含まれているフォルダをドックやデスクトップに作ったターミナルのエイリアスに対してドラッグ & ドロップします。そうするとそのドラッグ & ドロップしたフォルダの場所を起点としてターミナルが開きます。先ほどのターミナルのウインドウと比較するとフォルダの場所が違うことが確認できます。ここでは新しく開いたターミナルのウインドウでSass をコンパイルしてみましょう。Sass のコンパイルには Sass コマンドを使います。Sass コマンドの後にスペースを入れてコンパイルしたいファイル名を入力します。ここでは my-sass フォルダの中にあるscree.scss をコンパイルしたいのでscreen.scss というファイル名を入力します。これに続き記号の :そしてコンパイル後の CSS のファイル名を入力します。ここでは SCSS と同じscreen.css というファイル名になる様にしましょう。リターンキーでコマンドを実行します。 Sass ファイルのコマンドは完了しました。my-sass フォルダを開いてみると先ほどは SCSS ファイルだけでしたが新しく CSS ファイルができていることが確認できます。CSS ファイルを開くとSass ファイルがコンパイルされCSS が出力されていることが確認できます。この他にも Sass にやファイルやフォルダを監視して変更が発生した場合に自動でコンパイルをしたり出力する CSS のフォーマットスタイルを選択できたりといった機能がオプションとして付いています。このレッスンではMac 環境で Sass をコンパイルするために必要なソフトウエアのインストール手順と基本的なコマンドの使い方について学びました。

Sass入門ガイド

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

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

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

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

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