サイト制作に関するメモ書き

HOME > その他 > SCSSとCompassをSublime Text2で使ってみる

SCSSとCompassをSublime Text2で使ってみる

Sublime Text2でSCSSとCompassを使うための設定を試してみたので、そのメモ。

こちらの記事を参考にさせていただきました。
コーダー必見、SCSS・Compassで開発効率アップ|Sublime Text 2でコンパイル編 | Developers.IO

Rubyのインストール

RubyInstaller for WindowsからRubyの最新版をダウンロード。
ダウンロード後、ファイルを実行してインストールします。

how-to-use-the-scss-and-compass-in-sublimetext01

途中、「Rubyの実行ファイルへ環境変数PATHを設定する」という項目がありますので、
チェックを入れておきます。

how-to-use-the-scss-and-compass-in-sublimetext02

後はそのままインストールを実行。
 

SASSとCompassのインストール

Windowsキーを押して「cmd」で検索し、コマンド プロンプトを起動します。
ruby -v と入力して、バージョンがインストールしたものと同じか確認します。

how-to-use-the-scss-and-compass-in-sublimetext03

次にSASSをインストールします。
gem install sass と入力。

how-to-use-the-scss-and-compass-in-sublimetext04

エラーが出ました。
ググってみると、GemサーバーのSSL証明証エラーでインストールできないことがあるようです。

インストールや実行中にエラーが起こった場合の対処法 | Web制作者のためのSassの教科書 – 公式サポートサイト

ダウンロード先を一時的にhttps から httpに変更することで、インストールできるようです。
gem source -a http://rubygems.org/ と入力して、ダウンロード先をhttpに変更。

how-to-use-the-scss-and-compass-in-sublimetext05

確認メッセージが出るので、 y を入力。
これでダウンロード先がhttpに変更されました。

how-to-use-the-scss-and-compass-in-sublimetext06

再度 gem install sass と入力。

how-to-use-the-scss-and-compass-in-sublimetext07

SASSがインストールできました。
最後にCompassをインストールします。
gem install compass と入力。

how-to-use-the-scss-and-compass-in-sublimetext08

Compassも無事インストールできました。
ダウンロード先を元に戻す場合、 gem source -r http://rubygems.org/ と入力します。
 

必要なPackageのインストール

Sublime Textへもどり、Ctrl + Shift + p で Command Paletteを開きます。
以下の4つのPackageをインストールします。

  • Compass
  • Sass
  • SCSS
  • SCSS Snipets

 

試してみる

サンプル用に作成したフォルダをドラッグ&ドロップでSublime Textに入れます。
以下のような構成になっています。

  • sample/

    • css/
    • scss/
    • index.html

左側にプロジェクト一覧が表示されます。

how-to-use-the-scss-and-compass-in-sublimetext09

次に、Compassの初期設定を行います。
sampleディレクトリ直下にconfig.rbファイルを作成して、次のように記述します。

sass_dir = "scss"
css_dir = "css"
output_style = :expanded
line_comments = false

さらに細かく設定する場合、こちらが参考になりました。
[Compass] 超訳 Configuration Reference | WebTecNote

how-to-use-the-scss-and-compass-in-sublimetext10

Sublime Textでのビルド設定を変更します。
Tools > Build System > Compass を選択します。

how-to-use-the-scss-and-compass-in-sublimetext11

scssディレクトリ内にstyle.scssファイルを作成して、サンプルとして以下のように記述します。

@import "compass";

#header {
	width: 100%;
	.inner {
		width: 960px;
		margin: 0 auto;
		@include pie-clearfix();
	}
	.header-logo {
		float: left;
	}
	.gnav {
		float: right;
	}
}

how-to-use-the-scss-and-compass-in-sublimetext12

Ctrl + b でコンパイルします。
コンパイルが成功すると、下部にFinishedと表示され、cssディレクトリにstyle.cssが出力されます。

how-to-use-the-scss-and-compass-in-sublimetext13

style.cssは以下のように出力されています。

#header {
  width: 100%;
}
#header .inner {
  width: 960px;
  margin: 0 auto;
  *zoom: 1;
}
#header .inner:after {
  content: "";
  display: table;
  clear: both;
}
#header .header-logo {
  float: left;
}
#header .gnav {
  float: right;
}

how-to-use-the-scss-and-compass-in-sublimetext14

【参考サイト】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP