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

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

ただいまの
回答率

90.45%

  • Sass

    366questions

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

  • Sublime Text

    251questions

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

  • compass

    44questions

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

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,507

yoshimitsu41

score 24

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の部分が追加?されるような状態…。

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

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

{
    "selector": "source.sass, source.scss",
    "windows":
    {
        "cmd": ["build.cmd", "${file_path}", "${project_path:${folder}}"],
    },
    "osx":
    {
        "cmd": ["sh", "${packages}/Compass/build.sh", "${file_path}", "${project_path:${folder}}"],
        "path": "/usr/local/bin:/Users/USERNAME/.rbenv/shims"
    }
}

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

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

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


追記

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

{
    "selector": "source.sass, source.scss",
    "windows":
    {
        "shell_cmd": "build.cmd ${file_path} ${project_path:${folder}}"
    },
    "osx":
    {
        "shell_cmd": "sh ${packages}/Compass/build.sh ${file_path} ${project_path:${folder}}",
        "path": "/usr/local/bin:/Users/USERNAME/.rbenv/shims:$path"
    }
}

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/07/11 23: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/12 00:50 編集

    追記しました。
    こちら、環境がWindowsでSASSをインストールして確認したわけでもないのでちゃんと動くかはわかりませんが…。

    おそらく

    "osx":
    {
    "osx" {"path": "..."}
    }

    と、"osx"の中に"osx"が入っているなど、記述がおかしいために"path"オプションが誤動作してどんどんパスを上書きして戻せなくなっているのだと思います(あくまで推測ですが)。

    キャンセル

  • 2017/07/12 10:13

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

    キャンセル

  • 2017/07/12 11:31

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

    キャンセル

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

  • ただいまの回答率 90.45%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • Sass

    366questions

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

  • Sublime Text

    251questions

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

  • compass

    44questions

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