Emacs に Sass-modeをいれてscssを使う準備をする

いろいろとCSSよりも便利だということで今更ですが、ちょっと触ってみようと思ったのでその準備。
準備ばっかりしていてろくに何も進まないというパターンです。

sass

そうです形から入るタイプです。
スキーウェア+スノーボード+ブーツもろもろ買って、その年は1回もいかなかったりするアレです。

いいんです。ほっといてください。

SassとCompassをインストール

Scssを使うだけなら、scssだけでいいそうですけど、機能拡張できるcompassってのも便利らしいのでここは一気にいれておきましょう。
なーに面倒なことなんて何もないさ。

ともにRubyだそうですから一気にインストールしましょう。
rubyインストールしてない人は以前書いた ruby インストールの記事を参照ください

$ gem update --system
$ gem install sass compass
#rbenvでRubyインストールしている人のみ
$ rbenv rehash
$ sass -v
Sass 3.3.4 (Maptastic Maple)
$ compass -v
Compass 0.12.4 (Alnilam)

以上です。とりあえずこれでインストールは完了。

Emacsの開発環境も整える

まだ何もしていないのにとりあえず整えましょう。

scss-modeはここからインストール
https://github.com/antonj/scss-mode

設定は
http://qiita.com/sawamur@github/items/bb50d84af4d01a2eb5c2
を参照して。


(require 'scss-mode)
(add-to-list 'auto-mode-alist '("\\.scss$" . scss-mode))

;; インデント幅を2にする
;; コンパイルは compass watchで行うので自動コンパイルをオフ
(defun scss-custom ()
  "scss-mode-hook"
  (and
   (set (make-local-variable 'css-indent-offset) 2)
   (set (make-local-variable 'scss-compile-at-save) nil)
   )
  )
(add-hook 'scss-mode-hook
  '(lambda() (scss-custom)))

設定は今後見直すと思いますけど。
こちらの設定が気になるところです。
Emacsの『scss-mode』 – 牌語備忘録 – pygo

とりあえずあとはドットインストールの
Sass/SCSS入門 (全15回) – プログラミングならドットインストール

ここから始めようかな。

参照


Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語
平澤 隆 (著), 森田 壮 (著)
単行本(ソフトカバー): 352ページ
出版社: インプレスジャパン (2013/9/13)
言語: 日本語
詳細はこちら

スポンサードリンク

RSS購読のススメ

RSS

定期的に読んでいただけるかたはRSS登録しておくと便利です。RSS登録はこちら!!

びーおーぷんどっとねっとのRSS登録

Twitterでも情報をつぶやいているので、フォローしてみるといいかもしれません。

コメントを残す

サブコンテンツ

Profile

twitter

google+
@beopener12on Google+

Facebook

サイト内検索

記事を検索したいときはここにキーワードを入れて検索ボタンをクリックすれば見つかるかも・・・

スポンサードリンク

おすすめ

このページの先頭へ