EmacsでRails3の『scss』とかどうやって書いてんのかなと思ってごにょごにょやってみた

Rails3のscssはネストしてCSSを記述できるらしい。
しかしEmacsのcss-modeではネストされた記述をうまくインデントできない。

SCSS-MODE ってのがあるけども

~~scss-modeってのがあるらしいのだけど、自分の設定が悪いのかインデントが上手く機能しなかった。~~

~~SCSS-MODE入れてきちんと機能する場合はこれでバッチリなんだろうけど。~~

と思ったけど、使えるようになりました。『Emacsの『scss-mode』 - 牌語備忘録 - pygo』*1

他の方法：『SASS-MODE』ってので無理やりネストできそう

nex3/sass-mode · GitHub

install

git clone https://github.com/nex3/sass-mode.git

とりあえず落として動かしてみると無理やりネストできそう感じ。
問題は補完周り。

auto-completeとyasnippetで無理やり補完できるようにしてみる

auto-completeとyasnippetをインストール済み前提で。

auto-complete

『/auto-complete/ac-dict/css-mode』ファイルをコピーして、『css-mode』を『sass-mode』に書き換える。

yasnippet

『/yasnippet/snippets/css-mode』ディレクトリをコピーして、『css-mode』を『sass-mode』

init.el

(require 'sass-mode)
(when (boundp 'ac-modes)
  (setq ac-modes (append ac-modes (list 'sass-mode))))
(setq auto-mode-alist
      (cons '("\\.\\(scss\\)\\'" . sass-mode) auto-mode-alist))

こんな感じ

できなくもないと言うか使えなくもないと言うか微妙な気がする

#columns {
  background: #141;

  #main {
    margin-left: 17em;
    padding: 1em;
    background: white;
  }

  #side {
    float: left;
    padding: 1em 2em;
    width: 13em;
    background: #141;

    form, div {
      display: inline;
    }

    input {
      font-size: small;
    }

    #cart {
      font-size: smaller;
      color: white;

      table {
        border-top: 1px dotted #595;
        border-bottom: 1px dotted #595;
        margin-bottom: 10px;
      }

    }


    ul {
      padding: 0;

      li {
      list-style: none;

        a {
          color: #bfb;
          font-size: small;
        }

      }
    }
  }
}