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ディベロッパーとして様々なサービス開発のお手伝いをしている最新技術が大好きなブロガー。

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

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

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

大きな電源アダプターを小さくする新技術!約1/4と大幅な小型化

最近のノートパソコン本体は軽くてスリムになってきたが、電源アダプターは相変わらず大きくて重いまま。どうにかならないものか…と思っていたら近々市場に登場するようです。

Macのバックアップツール「Time Machine」のすごいところ

新しいMacBook Proを使い始めて、もう1ヶ月経ちますが、ふとTime Machineってスゴいなぁと思ってしまった。

そういえば、Macbook Pro 13インチ買いました

一応報告しておかなければね。このブログもMacbook Proで投稿しています。いやーパワフル!Power Mac G5から一気にMacbook Proに飛んできたからそりゃもう。

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

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

気になるMac OS X『Leopard』の全貌が明らかに!

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

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

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

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

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