質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

compass

CompassはSassを拡張したオープンソースのCSSフレームワークです。 特徴は、ベンダープレフィックス等の複雑なCSSを手軽に記述できる点、 CSSスプライト画像を簡単に作成できる点などが挙げられます。

Sublime Text

SublimeTextとは、オーストラリアのSublime HQ Pty Ltdが提供しているテキストエディターのことです。Mac/Windows/Linuxでの利用が可能で、柔軟にカスタマイズできたり、多くの言語に対応していくこともあり、海外や日本国内でも人気のあるエディターです。

Q&A

解決済

1回答

814閲覧

Sublimetext3/compassでsassのコンパイルができない。

yoshimitsu41

総合スコア36

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

compass

CompassはSassを拡張したオープンソースのCSSフレームワークです。 特徴は、ベンダープレフィックス等の複雑なCSSを手軽に記述できる点、 CSSスプライト画像を簡単に作成できる点などが挙げられます。

Sublime Text

SublimeTextとは、オーストラリアのSublime HQ Pty Ltdが提供しているテキストエディターのことです。Mac/Windows/Linuxでの利用が可能で、柔軟にカスタマイズできたり、多くの言語に対応していくこともあり、海外や日本国内でも人気のあるエディターです。

0グッド

0クリップ

投稿2017/07/11 13:31

mac 10.12.5
sublietext3
compass 1.0.3

■パッケージ
Sass
SASS Build
SCSS
SCSS Snippet
Compass

■ファイル
[test]
|_[sass]
|style.sass
|
[css]

textディレクトリにsassとcssのディレクトリがあります。

■config.rb
http_path = "/"
css_dir = "css"
sass_dir = "sass"
output_style = "expanded"
line_comments = false
relative_assets = true
Encoding.default_external = "utf-8"

■Compass.sublime-build
{
"cmd": "sh '${packages}/Compass/build.sh' '${file_path}' '${project_path:${folder}}'",
"working_dir": "$packages/Compass",
"selector": "source.sass, source.scss",
"shell": "true",
"windows":
{
"cmd": "build.cmd "${file_path}" "${project_path:${folder}}""
},
"osx":
{
"osx" {"path": "/usr/local/bin:/Users/USERNAME/.rbenv/shims:$PATH"}
}
}

⌘+b
でコンパイルするとエラーになります。

■エラー内容
[Errno 2] No such file or directory: 'sass'
[cmd: ['sass', '--update', '/Users/USERNAME/Desktop/test/sass/style.sass:/Users/USERNAME/Desktop/test/sass/style.css', '--stop-on-error', '--no-cache', '--style', 'compressed']]
[dir: /Users/USERNAME/Desktop/test/sass]

[path: /usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin]
[Finished]

保存するたびにpathの部分が追加?されるような状態…。

わかる方ご教授お願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

動作未確認ですが、気になる所を修正してみました。

javascript

1{ 2 "selector": "source.sass, source.scss", 3 "windows": 4 { 5 "cmd": ["build.cmd", "${file_path}", "${project_path:${folder}}"], 6 }, 7 "osx": 8 { 9 "cmd": ["sh", "${packages}/Compass/build.sh", "${file_path}", "${project_path:${folder}}"], 10 "path": "/usr/local/bin:/Users/USERNAME/.rbenv/shims" 11 } 12}

pathの最後に$PATHを付けるのは余計かと思います。
システムのパスに一時的に指定したパスを追加するオプションなので、下記のような感じで同じパスを2重に設定することになると思います。←(間違っていますが、打ち消し線が使えないようなので残してます。)

$PATH:/usr/local/bin:/Users/USERNAME/.rbenv/shims:$PATH

SASS用のビルドシステムはありませんが、書き方の参考にはなるかと思います。
Sublime Text 3のBuild Systemについて


追記

pathオプションの動作を少し勘違いしていました。
一時的にではありますが、ビルドコマンド実行中は指定した値でPATHを完全に置き換えるみたいなので$PATHは付けないとダメみたいです。
それと、指定方法が間違っているとSublime Textを再起動するまでPATHを上書きして戻らなくなってしまうようです(バグかな?)。

JavaScript

1{ 2 "selector": "source.sass, source.scss", 3 "windows": 4 { 5 "shell_cmd": "build.cmd ${file_path} ${project_path:${folder}}" 6 }, 7 "osx": 8 { 9 "shell_cmd": "sh ${packages}/Compass/build.sh ${file_path} ${project_path:${folder}}", 10 "path": "/usr/local/bin:/Users/USERNAME/.rbenv/shims:$path" 11 } 12}

こちらの環境はWindowsなのでMacのシェルの動作はちょっとわかりませんが、これでどうでしょう?
確認ができないので"working_dir": "$packages/Compass",も、もしかしたら必要かもしれないです。

下記の記事を参考にしたのだと思いますが、上記でダメだったらその記事のcmdshell_cmdにして実行してみて下さい。
shell_cmd"shell": trueを設定した時のcmdと同等のオプションになります。

SublimeTextでのsass・compass自動コンパイル

投稿2017/07/11 14:21

編集2017/07/11 16:22
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoshimitsu41

2017/07/11 14:40

lunatea様 ご回答ありがとうございます。 試しましたが下記のエラーがでました。 [Errno 2] No such file or directory: 'sh' [cmd: ['sh', '/Users/USERNAME/Library/Application Support/Sublime Text 3/Packages/Compass/build.sh', '/Users/USERNAME/Desktop/test/scss', '/Users/USERNAME/Desktop/test']] [dir: /Users/USERNAME/Desktop/test/scss] [path: /usr/local/bin:/Users/USERNAME/.rbenv/shims] [Finished] 解決方法はございますでしょうか?
退会済みユーザー

退会済みユーザー

2017/07/11 15:52 編集

追記しました。 こちら、環境がWindowsでSASSをインストールして確認したわけでもないのでちゃんと動くかはわかりませんが…。 おそらく "osx": { "osx" {"path": "..."} } と、"osx"の中に"osx"が入っているなど、記述がおかしいために"path"オプションが誤動作してどんどんパスを上書きして戻せなくなっているのだと思います(あくまで推測ですが)。
yoshimitsu41

2017/07/12 01:13

再度compassをインストールし直してご指摘の通り対応することで動きました!ありがとうございました。
退会済みユーザー

退会済みユーザー

2017/07/12 02:31

Sublime-Buildコマンドの挙動しか確認できてなかったので、ちゃんと動くようになって良かったです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問