AtomでSass + Compassのコンパイルをしてみよう

2016/08/03

23_1
Atomのsass-autocompileでSassのコンパイルをしてみようという記事でパッケージを使ったsassファイルのコンパイルについて書きましたが、sass-autocompileではCompassでのコンパイルに対応していませんでした。
 

Sass + Compassとういう組み合わせは多いので、Compassを利用しているsassファイルをコンパイルする方法を紹介します!今回はパッケージなどを利用するわけではなく、コマンドからコンパイルをするという流れになります。

Compassとは

そもそもCompassってなに?と思われている方へ簡単に説明すると、CompassはSassのフレームワークでSassをより便利に利用することのできるものです。
 
 

それでは、ここから実際にCompassを使ったコンパイルをするまでをみていきたいと思います!

Rubyの確認

まず、Sassを利用するにはRubyがPC自体にインストールされている必要があります。
Macは最初からRubyがインストールされていますが、Windowsはインストールされていないので公式サイトからインストーラーをダウンロードしてインストールしましょう。
 

Rubyのダウンロードはこちら

インストールの確認

Rubyがインストールされているかは、ターミナルやコマンドプロンプトを起動してから

ruby -v

上記のコマンドを入力してRubyのバージョンが表示されればインストールされています!

Sassのインストール

Rubyのインストールができたら続いてSassをインストールします。
Sassもコマンドからインストールをします。

sudo(Windowsは不要) gem install sass

上記のコマンドを入力するとインストールが始まります。
 

インストールの確認

sass -v

上記のコマンドでバージョンが表示されたら成功です!

Compassのインストール

最後に本題のCompassをこちらもコマンドからインストールします。

sudo(Windowsは不要) gem install compass

上記のコマンドでインストールされます。
 

インストールの確認

compass -v

こちらも上記のコマンドでバージョンが表示されたら成功です!

Atomでコマンドを実行できるようにする

コンパイルはコマンドでおこなうのにターミナルやコマンドプロントを毎回起動させて…というのは面倒なので、先にAtomでコマンドを実行できるパッケージをインストールして便利にしましょう!
 

利用するのは、atom-terminal-panelというパッケージです。
 
 

atom-terminal-panelのインストール

設定画面の「インストール」を表示して、検索フォームにatom-terminal-panelと入力するとパッケージが見つかるので、インストールボタンをクリックしてインストールしましょう。
 

コマンドパネルの表示

23_2
インストールされると左したに「+」というアイコンが表示されます。それをクリックするとコマンドパネルが表示されます。

テスト用ファイルを用意する

Atomでコマンドパネルの表示が確認できたら、ちゃんとCompassのコンパイルができるか試してみましょう!
 
 

テストフォルダの作成

デスクトップに「test」などテスト用のフォルダを作成しましょう。
 

Compassの初期設定

Atomでデスクトップに作成したテスト用フォルダを選択してコマンドパネルを開いてみましょう。
選択中のフォルダに移動した状態で表示されているかと思います。
 

compass creat

テスト用フォルダに移動して上記のコマンドを入力すると、フォルダ内にCompassのファイルが一式作成されます。

scssファイルの用意

compass creatで作成されたものの中にsassフォルダがあります。

@charset "utf-8";
@import "compass"; //Compassの全ての機能をインポート
@import "compass/reset/"; //CompassのリセットCSSをインポート

そこへ新しく上記の内容でtest.scssというファイルを作成しましょう。
 
 

ここまで出来たらコンパイルのテスト準備は完了です!

コンパイルしてみる

テスト用のファイルを使って実際にCompassのコンパイルができるか試してみましょう。
 

テスト用のフォルダを選択した状態でコマンドパネルを表示して、テストフォルダの位置で開からていることを確認してください。
 

確認ができたら

compass compile sass/test.scss

上記のコマンドを入力してみましょう。
stylesheetsフォルダにtest.cssが生成されてリセットcssの内容が書かれていたら成功です!
 
 

便利なコマンド

compass watch sass/style.scss //指定したファイルを保存と一緒に自動コンパイルさせる
compass watch --output-style compressed sass/style.scss //圧縮ファイルにしてくれる
compass w //sassフォルダのファイルを全て保存と一緒に自動コンパイルさせる

コマンドでの作業に慣れていなかったり苦手意識があると面倒に感じてしまいがちですが、覚えてしまうと簡単ですしコマンドから作業できるとなにかと便利になることが多かったりするので、是非お試しあれ!

About

madka prof

WebLifeTimesはWebデザイナーのMadkaがWeb制作に関連したことや日々のちょっと気になったことなどを調べたり記録しているサイトです。TwitterFacebookで気になったニュース記事をシェアしたり独り言をつぶやいたりしています!

New Post

Recommend