環境によってはsudoを付ける。
$ (sudo) npm install -g less
Node.jsを入れてない場合はこちらを参考に。
https://gist.github.com/gaspanik/5410891
(元々lessというコマンドがあるのでコマンドラインでそのまま使う場合はlesscがコマンド名)
インストールはPackageControlから。https://github.com/berfarah/LESS-build-sublime
Sublime TextのビルドシステムはPATHを通さないとエラーになるのでlesscの場所を指定してあげる。
/Users/username/Library/Application Support/Sublime Text 2/Packages/LESS-build/LESS.sublime-build
に書く。
lesscの場所はターミナルで
which lessc
でわかります。
{
"cmd": ["lessc", "$file", "${file_path}/${file_base_name}.css", "--verbose"],
"file_regex": "^[ ]*File \"(...*?)\", line ([0-9]*)",
"selector": "source.css.less",
"osx":
{
"path": "/usr/local/bin:$PATH"
},
"windows":
{
"cmd": ["$packages\\LESS-build\\dotless.Compiler.exe", "$file", "${file_base_name}.css"] //To just store the css in the same folder as the less
},
"variants": [
{
"name": "Minify",
"cmd": ["lessc", "$file", "${file_path}/${file_base_name}.min.css", "-x", "--verbose"],
"osx":
{
"path": "/usr/local/bin:$PATH"
},
"windows":
{
"cmd": ["$packages\\LESS-build\\dotless.Compiler.exe", "-m", "${file}", "${file_base_name}.min.css"]
}
}
]
}
こんな感じに。
インストールはPackageControlから。https://github.com/alexnj/SublimeOnSaveBuild
入れた後は、メニューバーの
Preference PackageSettings SublimeOnSaveBuildSettings - User
で自動ビルドするファイルをコントロールできる。
{
"filename_filter": "\\.(ts|css|js|sass|less|scss)$",
"build_on_save": 1
}
インストールはPackageControlから。https://github.com/gcollazo/BrowserRefresh-Sublime
ショートカットの変更はPreference KeyBindings-User
にこんな感じに追記、delayとかはお好みで、
{"keys": ["command+s"], "command": "browser_refresh", "args":
{
"auto_save": true,
"delay": 0.6,
"activate_browser": false,
"browser_name" : "all"}
}
keysの所をcommand
じゃなくてsuper
と書くとCmd+s
でSaveができなくなるので注意。
普通のCSSやhtmlも保存と同時にリロードしてくれるので便利です。
プラグインの「LiveReload」でもできるけどScssを使うときにconfig-rb
勝手に生成しちゃうのでこっちのほうが良いかも。