おおたおおた
2017/07/12

Sassの導入方法

この記事は約3分で読めます。

Sassの導入方法

CSS

前回はSassの特徴を簡単にご説明しました。
今回はそんなSassを使い始めるための手順を説明します!

(Sassを使いたい6つの理由! 記事はこちら)

Sassを使いたい6つの理由!

Sass導入の流れ

大まかな流れとしては、

1.Rubyのインストール

2.Sassのインストール

3.Koalaのインストール

4.エディタにSassを対応させる

以上となります。

1つずつ順番にご説明します。

1.Rubyのインストール

SassはRubyがないと動きません。

Macには標準でインストールされているので、Windowsの方はRubyのインストールをしましょう。

 

https://rubyinstaller.org/(ダウンロード先)

まずはダウンロード。
上部にある赤い「Download」ボタンをクリック、最新バージョンを選択して下さい。

インストールする際に「Add Ruby executables to your PATH」というチェック項目を忘れずにチェック。

 

念のためにちゃんとRubyがインストールされているか確認します。
「コマンドプロンプト」を起動します。
Windows版の黒い画面が現れます。緊張しますね。
(コマンドプロンプトはアクセサリの中にあったり、見当たらない場合はwindowsの中を検索してみて下さい)

バージョンの確認で以下のコマンドを入力、「Enter」

ruby -v

「ruby 2.3.3p222」などといったRubyのバージョンが表示されたら大丈夫です。

 

2.Sassのインストール

引き続きコマンドプロンプトを使ってコマンド入力します!

Sassのインスト―ルコマンドは以下の通り。

gem update --system
gem install sass

しばらく待つと、
「Successfully installed sass-3.2.14」~の文字。
これでWindowsにSassを導入できました。

また念のためにインストールできたか確認してみましょう。

sass -v

これも「Sass 3.2.14 」などのバージョン情報がでたら大丈夫です!

3.Koalaのインストール

続いてGUIソフトのKoalaをインストールします。
これはSassで書いたものをCSSに変換(コンパイル)するためのソフトです。
ブラウザはSassは読み込んでくれないのですが、CSSなら読んでくれます。
なのでCSSに変換してサーバーに送るための方法です。

http://koala-app.com/(ダウンロード先)

かわいいコアラさんに癒されます。

4.エディタにSassを対応させる

お使いのエディタでSassが使えるように設定します。

今回はSublime Textの方法を記載します。

といってもとても簡単なのですが、「Package Control: Install Package」から「SCSS」というパッケージをインストールします。

まとめ

Sassの導入については以上です。

今回は私が導入した際の流れで説明しましたが、
他にもSassを利用する方法は様々なパターンがあります。
自分のやり方にあった方法を探してみてもいいかもしれませんね♪

Sassの導入方法
おおた イラストレーター / フロントエンジニア

リトルトゥースです。

一覧へ戻る

私たちについて

私たち『Camarade(カマラード)』はクリエイター目線で
総合的な情報を発信するWebメディアとして
PhotoShopやillustratorの活用方法や、WordPressなどのCMSの
カスタマイズ方法など幅広い情報をお届けしていきます。
同時にSOHOやフリーランスのパートナーを募集しております。