※当サイトの記事には、広告・プロモーションが含まれます。

Sassの勉強

Sass ⇒ CSSのコーディング効率やソースコードの保守性を向上させる技術です。

Sassの特徴

変数$

関数

入れ子(ネスト)

ミックスイン

Sassを使うにはRubyをインストールする必要があります。

Rubyプログラミング言語の一種。

Pythonプログラミング言語の一種。

Perlプログラミング言語の一種。

Ruby on Railsとは?

Webアプリケーションを作るためのフレームワーク

Sassを使えるようにするまでの流れ

Rubyのインストール

②Sassのインストール

③Koalaのインストール

Rubyのインストール

『Rubyinstuller』で検索。『Download』をクリック。

f:id:ts0818:20150420103311p:plain

 自分のパソコンにあったバージョンを選ぶ。『エクスプローラー』の『PC』で右クリック『プロパティ』で自分のパソコンの『システムの種類』が分かります。今回は『Ruby2.2.1(x64)』を選択。

f:id:ts0818:20150420103312p:plain

 『完了』をクリック。

f:id:ts0818:20150420103314p:plain

 『Rubyの実行ファイルへ環境変数パスを設定する』にチェックをして『インストール』をクリック。

f:id:ts0818:20150420103313p:plain

上手くインストールされれば、コマンドプロンプトに『ruby -v』と打ち込んでrubyのバージョンが表示されます。これでRubyがインストールされたことになります。

f:id:ts0818:20150420103315p:plain

Sassのインストール

続いてSassのインストールですが、windowsの場合、『gem install sass』と入力するとエラーが出る場合があります。エラーが出ずに、
『Fetching: sass-3.4.13.gem (100%)
Successfully installed sass-3.4.13
Parsing documentation for sass-3.4.13
Installing ri documentation for sass-3.4.13
Done installing documentation for sass after 4 seconds
1 gem installed』

のような表示が出ればSassのインストール成功です。
エラーが出た場合は下記手順を実行していきます。

f:id:ts0818:20150420103316p:plain

『gem source -a http://rubygems.org/』と入力することで、https://rubygems.orgとなっているものをhttp://rubygems.orgに変換してます。

f:id:ts0818:20150420103317p:plain

『Do you want to add this insecure source?[yn]』と出てくるので、『y』を入力([yn]はyes or noという選択だと思われるのでyesの『y』を入力)

f:id:ts0818:20150420103318p:plain

http://rubygems.org/added to sources』と表示されたら、『gem install sass』と入力し、いろいろ表示が続き最後に『1 gem installed』と表示されればSassのインストール完了です。

f:id:ts0818:20150420103319p:plain

Koalaとは?

 Sassもコンパイルが必要。ふつうはコマンドプロンプトを使う。

Sass ⇒ コンパイルCSS

Koala ⇒ SassからCSSへのコンパイルを自動でしてくれる。

Koalaをインストール

http://koala-app.com/のサイトでダウンロードをクリック。

f:id:ts0818:20150420205436p:plain

ファイルを選択してダウンロードをクリック。

f:id:ts0818:20150420205438p:plain

Koalaのインストール

f:id:ts0818:20150420205439p:plain

f:id:ts0818:20150420205440p:plain

f:id:ts0818:20150420205441p:plain

f:id:ts0818:20150420205443p:plain

f:id:ts0818:20150420205442p:plain

f:id:ts0818:20150420205444p:plain

下記画面が出ればKoalaのインストール完了です。

f:id:ts0818:20150420205445p:plain

Sassファイルを作ってKoalaを使ってコンパイルしてみる

デスクトップに新規フォルダ作成(今回は『sasstry』という名前のフォルダ名にします。)

『sasstry』フォルダの中にファイルを1つ作成します。今回は『style.scss』という名前のファイル名にします。

必ずファイルの拡張子を『.scss』にします。

 

例:Sassの入れ子

style.scss

#main {
  width:100px;
  h1 {
    font-size:18px;
  } //h1の締め
} //#mainの締め

 

『sasstry』フォルダを『Koala』にドラッグ&ドロップします。

 

f:id:ts0818:20150420222137p:plain

『アウトプットスタイル』を決めて『コンパイル』をクリックして『SUCCESS』と表示されればコンパイル成功です。

f:id:ts0818:20150420221541p:plain

コンパイルに成功すると『sasstry』フォルダに『style.css』ファイルが追加されます。