このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

CodaでSassを使う時に入れとくと便利なプラグイン

CSS3

2012.05.22

この記事は最終更新日から1年以上が経過しています。

Sass?って方はこちらの記事でも参考に。

CSSをライブラリ化?Sass(scss)のインストール 使用方法 mac

何かと便利なSass。そして何かと便利なエディタ「Coda」。

そんな便利と便利が重なった時、快適が生まれます。

と、前置きはこのぐらいにしておき、「Coda」でSassを利用するときに入れとくと便利なプラグインを紹介します。

 

ちょっと前まで、「色が変わらないよ。」とか「コードヒント出ないよ。」と言っていたのだが、すぐ有志がなんとかしてくれる時代です。(笑)

何はともあれ、sassをインストールしましょう。

Sassをインストール

前回はrubyを使い、hamlをインスール・・・と行っていましたが、僅か3ステップほどで、すぐにインストールは可能です。

今回はMacでのインストールとなります。

アプリケーション > ユーティリティ > ターミナル

を起動しましょう。

起動すると、

Macintosh:~ ユーザー名$

などが表示するかと思うので、表示したら、

sudo su

を入力後、リターン。

Password:

と表示すると思うので、Macのパスワードを入力。

入力した文字は表示しませんが、入力されています。入力したならreturn(Enter)キーを押す。

sh-3.2#

と表示したらこっちのものです。

gem install sass

と入力し、リターン。

しばらくしてsh-3.2#が表示すればインストール完了!簡単です。

Scssからcssを自動書き出しプラグイン導入

Coda-Sass-Plug-in

こちらにプラグインがUPされているので、Download as zipボタンをクリックし、ダウンロードしましょう。

解凍したフォルダの中にSassPlug-in.zipというファイルがあるので、更に解凍。

その中にSass.codapluginがあるので、ダブルクリックするか、

[ユーザ名]/ライブラリ/Application Support/Coda/Plug-ins/

のフォルダ内に置きCodaを再起動しましょう。

メニューの プラグインを確認するとSassのメニューが現れます。

ショートカット Shift + Ctrl + S でcssを書き出すことが出来ます。

設定方法は以下のとおり、

メニュー > プラグイン > Sass Preferences から設定が行えます。

 

Css Save Folder Path: 保存先のパスを設定。下のセレクトメニューから相対パスか絶対パスかを選択出来ます。

以下の画像は相対パスの[../css/]でひとつ前の階層のcssフォルダに生成する設定です。

ここで注意しないといけないのが、パス入力をした後にreturn(Enter)キーを押さないと反映されません。。。

Make css save folder if needed:指定したフォルダが存在しない場合、新しくフォルダをつくるかどうか。

Css Creation:チェックを入れると、普通にscssを保存すると同時にcssも自動で書き出されます。

Output Style:圧縮、1行、複数行、入れ子(インデント)の4種類から書き出しの形式を選択。

 

Sass.modeでコードを色付け

これが結構あるとないとでモチベーションが左右されたりします。(笑)

brajeshwar / Sass.mode

又同じく、「Download as zip」ボタンを押しダウンロード。

解凍したフォルダの名前をSass.modeに変更しましょう。

[ユーザ名]/ライブラリ/Application Support/Coda/Modes/

のフォルダ内に置き、Codaを再起動させればインストール完了。

scssファイルを開くと、

色がついております。また、コードヒントも出ます。

あー。嬉しいですねー。

色が変更しない場合は、エディタ下部にある、歯車のアイコンから設定します。

構文モード > Sass を選択しましょう。

 

SASSでもzenCodingを使用する

言わずと知れたZenCodingをSass(scss)ファイルでも使用しましょう。

プラグインダウンロードは以下から。

https://gist.github.com/939702

[ユーザー名]/Library/Application Support/Coda/Plug-ins/TEA for Coda.codaplugin

というファイルを右クリックし 「パッケージ内容を表示」 を選択。

中身が表示されるので、Support/Library/zencoding に先ほどダウンロードした

my_zen_settings.pyを置き、Codaを再起動させれば完了。

これで、Sass(Scss)ファイルでもZenCodingを利用出来ます。

 

ちなみにZenCodingは以下のリンクからダウンロード出来ます。

zen-coding

 

以上、CodaでSass導入プラグインでした!

Comment

Related Article

CSS ファイル簡単生成。APBCSS ファイルジェネレーターツール「APB CLI」の使い方。

2017.06.18

「compass」をやめて、爆速「Libsass」に変えたら作業が超捗った件。

2016.06.11

「CSSが難しい。。」「CSSが面倒。。」 と言ったエンジニアさんにもオススメのCSS設計! 「APBCSS(Atomic Parts Base CSS)」が良い感じ!

2016.03.28

2016年は「AtomicDesign」を取り入れた「APB CSS(Atomic Parts Base CSS)」で迷わず、簡単、拡張性持った CSS設計を!

2016.01.02

CSS3アニメーション をスマートフォンサイトで 綺麗に作りたいあなたへ

2014.08.25

フロントエンド パフォーマンス向上について まとめ

2014.01.07

前回に続いて、SPEC vol.4で3位受賞しました。

2012.07.28

前回に続いて、SPEC vol.4に参加しております。

2012.07.15

CSS3のみでAjax風 ページネーション(ページ送り) JavaScript無し

2012.06.03

CSSでフォームパーツ(input,checkbox,etc…)をカスタマイズ

2012.06.03

CATEGORY LIST

LATEST NEWS

Ubuntu 18.04 LTSで OpenGL開発

ubuntu

2019.05.20

MacOS Mojave (10.14.4)の Xcode に、過去のMacOSのSDKをインストール

C++

2019.05.19

クローンソフトの「EaseUS Disk Copy」を使って、OSのバックアップを取ってみた。

tool

2019.05.06

Rails5 gemでmysql2が インストールできない

Ruby

2019.05.05

平成最後のお買い物!!「Logicool MX Master 2 Wireless Mouse」と「K780 マルチデバイス BLUETOOTH® キーボード」で快適PC生活。

ubuntu

2019.04.27

Amazon 87時間のビックセール タイムセール祭りで購入したもの

イベント

2019.04.23

Androidに Linuxを簡単にインストールするアプリ「UserLAnd」

Linux

2019.04.16

SPAサイトでの認証認可 JWT✗Rails5✗Nuxt.js

JavaScript

2019.03.24

CentOS MySQL(MariaDB) を バージョン10.3に yumでアップデート

MySQL

2019.03.22

Ubuntu 開発環境構築まとめ

ubuntu

2019.02.25

Nuxt.js と auth-module (@nuxtjs/auth)で、JWT(JSON Web Tokens)& OAuth 認証 ログイン

JavaScript

2019.02.21

HerokuでRailsをビルド buildpack、Rubyバージョンでエラー

エラー

2019.02.13

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US