AA研514ばんの日誌

2018-03-12

Win環境でscssとかcompassとか

まずrubyを入れる
インストーラー形式があるが、個人的に7zで手動で「\usr\local」以下に同フォルダ構成で入れた
(既にPATHは通してある)
cmdから(必要なら管理者で)
gem update --system
gem install compass
compass入れたら一緒にsassも入れてくれる
%home%に移動して初期設定
ユーザープロファイル以下でもいいんだろうけどホームディレクトリ作って%HOME%設定しとくのは
NTEmacs使ってたら、ほぼデフォだろう
compass create --sass-dir sass --css-dir css --images-dir img --javascripts-dir js
実行したフォルダ内にcompass関連のファイルが作成される
scss-mode.el
ググってgithubにあるやつを落としてきて、site-lisp内に置く
.emacsに設定追加
(autoload 'scss-mode "scss-mode");
(add-to-list 'auto-mode-alist '("\\.scss$" . scss-mode))
(add-hook 'scss-mode-hook
'(lambda ()
(set (make-local-variable 'css-indent-offset) 2)
(set (make-local-variable 'scss-sass-options) '("--compass"))
(set (make-local-variable 'scss-compile-at-save) nil)
))
scssファイル編集時にC-c C-cでcss生成
裏で「sass --compass --update 開いてるscssファイルのフォルダ」が実行される
なんで開いてるファイル対象じゃなくフォルダ対象でやるのかわからんが気にせず使うことにしている
scssやcompassに関してはまだ本格的にやってないのでこれから
とりあえずscssの先頭に
@import "compass";
と書いてから編集を始める
(例:test.scss)
@import "compass";
.box {
@include border-radius(10px);
}
C-c C-cすると、
test.css
.box {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; }
みたいな感じで生成される
関係ないけど
この手のことを書くつもりで日記スクリプト書いてなかったんで
インデント部分の半角スペースそのまんまで表示されとらん