いいなもっと.com > Webデザイン > SassをCoda2で使う
2014
02/ 03

SassをCoda2で使う

Webデザイン


あんまり一般的じゃ無いのかも知れませんが、自分のための備忘録として記事を書きます。パソコン買い換えたときに忘れちゃいそうですからね。

SassというのはCSSを拡張してパワフルにしたものなんです。Rubyという環境が無いと使えないのですが、Macには標準でRubyがインストールされているので簡単にインストールできます。WinodwsではこのRubyのインストールをコマンドプロンプトから始めなければいけないのでちょいと腰がひけてしまいますよね。

Sassのインストール

ターミナルを開いて sudo gem install sass とタイプするだけです。

パスワードを聞かれますから、Macのパスワードを入力します。これで完了です。ねっ、簡単でしょ♪

Coda Sass プラグインをインストール

Coda-Sass-Plug-in をダウンロード

Coda-Sass-Plug-in をダウンロード

GitHubより Coda-Sass-Plug-in をダウンロードします。

ダウンロードしたZIPファイルを解凍すると、中に『Sass Plug-in』というZIPファイルがあるので、それを更に解凍します。

解凍したフォルダにある『Sass.codaplugin』というファイルを以下のフォルダにコピーします。

Macintosh HD > ユーザ > 【ユーザー名】> ライブラリ > Application Support > Coda2 > Plug-ins

もし『ライブラリ』フォルダが無ければ、ファインダーの上のメニューで【Option】キーを押しながら『移動』をクリックすると入ることができます。

これでインストールは完了です。Coda2を起動すればいつものメニューにプラグインが追加されているはずです。

Sassを使う

Coda Sass プラグインの設定

Coda Sass プラグインの設定

Sassを書くには拡張子を『.scss』にしたファイルを作るだけです。これを保存するときに【Control】+【Shift】+【S】を押せば自動で拡張子が『.css』のスタイルシートのファイルが生成されます。デフォルトでは同じフォルダに作られますが、もし変えたければ上のメニューのプラグインから『Sass』→『Sass Preference』と進んで設定します。

Sass Coda プラグインが自動生成するCSSファイルはデフォルトの『nested』でして、これはちょいと読みづらいので気に入らないのですが、変更の方法が分からないので、諦めてます。ホントなら普通のCSSの記法の『expanded』が良いんですけどね。これだけが残念です。


タグ:

« »

コメントを残す