Coda 2ユーザーのためのSass導入メモ!Sassインストール方法とSassプラグイン

2012年12月9日 18:46

そろそろSassを導入しようと思ったので、Sassのインストール方法やCoda 2のSassプラグインなどを忘れないようにメモっておこうと思います。

いろいろ調べて導入したのですが、まとめ記事などに載っているプラグインをダウンロードできるサイトが無くなっていたりして困りました。

なんとかプラグインがある場所を見つけたので、これからCoda 2にSassを導入する人たちのために。

Sassのインストール

結構簡単でした。

Sassインストール

$ sudo su

sudo suと入力、returnキー。

Password:

と表示されます。Macのパスワードを入力(入力内容は表示されません)、returnキー。

sh-3.2# gem install sass

gem install sassと入力、returnキー。

インストールが始まってしばらくすると

sh-3.2#

と表示されインストール完了です。

Coda 2用のSassプラグイン

Sassをインストールしただけでは意味がありません。.scssファイルを.cssに書き出してくれるプラグインが必要です。

secca/Coda-Sass-Plug-in · GitHubにアクセスし、「ZIP」をクリックしてダウンロードして解凍。

内包されている「SassPlug-in.zip」を解凍すると、「Sass.codaplugin」が入っています。

これをCoda 2のプラグインフォルダに移動。

/ユーザー名/Library/Application Support/Coda 2/Plug-ins

Coda 2を再起動。

Coda2用Sassプラグイン

すると、プラグインにSassが表示されます。

実際に使ってみる

.cssファイルを作るように、.scssファイルを作成します。

SCSS記法で記述します。まずは普通にCSSを書いてみてください。

ちなみに、Coda 2は最初から.scssファイルにカラーリング設定がされているようなので、.modeファイルの導入とか設定は必要はないようです。

で、記述し終わったら、control + shift + sを押すと、同じ階層に.cssファイルが生成されます。

簡単!

著者:イハラ ユウタ

埼玉県の武蔵浦和在住。某ウェブ制作会社のFlashクリエイター兼フロントエンドエンジニアを経て、フリーのWebディベロッパーとして様々なサービス開発のお手伝いをしている最新技術が大好きなブロガー。

WEBサイトを丸ごとダウンロードできるMac版ソフトウェアSiteSuckerが便利

ウェブ制作者にはもってこいなMac版アプリケーションのSiteSucker。このアプリケーションはウェブサイトを丸ごとダウンロードしてくれちゃう優れものです!

いろんな形式の動画を再生できるMac用動画プレイヤー「MPlayerX」が凄過ぎる

Macでさまざまな動画を観ようとするといろんなプレイヤーをインストールすることになる。自分は今までQuickTime、VLC、RealPlayerなど用途に合わせて使い分けてきた。もちろん動画形式のせいもあるけど。でも、もうどの動画プレイヤーも使うことはないだろう。

MacのキャプチャソフトはSkitch以外考えられない!ってくらい便利

キャプチャソフトってMac純正のアプリケーションや、ブラウザの拡張機能とかあるけど、正直ここ数ヶ月Skitchを使っていたけど、これは手放せないアプリケーションのひとつだわ。

USB2.0の20倍の速さでデータ転送が可能なThunderboltとは

新しいMacBook Proが発表されました。そのMacBook Proで注目されているものとして、Thunderboltという聞きなれないものがあります。これはUSBやFirewireなどと同じI/Oインターフェイスです。なんで注目されているんでしょうか。知ってしまうと欲しくなりますよ!

ファイルのアップロードはトラック野郎『Transmit 3』

Skitch for Macをダウングレード!改悪してしまったSkitchを元に戻す方法

このブログでも紹介したアプリケーションのSkitchですが、とつぜん全く別なアプリケーションになってしまって悲しかったので、ダウングレードしました。その方法をご紹介します。

必要なものだけのブラウザ『Camino』

Safari 3.0.2 を試してみた。やっぱ紛らわしい。

2009年に購入したMacBook ProのHDDをSSDに交換したら快適!

自分が使っているMacbook Proですが、最近ハードディスクが頻繁にカリカリカリ…という音がし始めたので、壊れる前にどうにかしようと思ったわけです。

Mac OSX MavericksにGitをインストールするまでの苦難と解決メモ

Mac OSX MavericksにGitをインストールしようと思ったのですが、いろいろつまずいたので手順とメモを。コマンド系は覚えきれませんね。