【はじめてのSass】Koala+compassで発生したコンパイルエラーと解決策

案件でSassを使う機会があったのでこの機に身に付けようと思います。とりあえず最初にハマったコンパイルエラーと解決方法の覚えがきをば。

以下の記事を参考に、Koalaを導入してCompassモードでのコンパイルを行いました。

【エラー1】UTF-8 and Windows-31J　うんたら

エラーコード

Encoding::CompatibilityError on line ["136"] of C: incompatible character encodings: UTF-8 and Windows-31J Run with --trace to see the full backtrace

ファイルのパスに日本語の2byteが含まれていたことが原因っぽいかんじでした。

自分はwindowsのユーザー名（Microsoftアカウント）を日本語にしてしまっているので、user配下に保存したscssファイルをコンパイルしようとするともれなくエラーになってしまっていたようです。

解決策：Cドライブ直下に移動

今回は、安直にCドライブ直下にフォルダを移してからコンパイルすると上記のエラーを吐かなくなりました。

【エラー2】全角スペース

エラーコード

error sass/style.scss (Line 1: Invalid CSS after "　@charset "UTF-8"": expected "{", was ";")　Compilation failed in 1 files.

全角スペースが入っていたため発生しました。

解決策：全角スペースを削除

全角スペースを削除したらエラーを吐かなくなりました。

以上、初挑戦であれこれググりながら辿り着いた結果なので、正しい解法なのかどうかちょっと自信がないのですが、これでひとまず無事コンパイルできるようになりました。

Sassを触るにあたっていろんな人のブログなども見たけど、皆さん総じて「いつかやろうと思ってたけどCSSで十分事足りてるから手を付けてなかった」と述べますが、自分もまったく同じパターンでした。

しかし「実際触ってみると大変便利だ！もっと早く勉強したらよかった」とも書かれていて、それも完全に同意。とはいえまだSassの機能を全然活かせてないので、ちょっとずつ使えるように勉強していこうと思います。

Web制作者のためのSassの教科書 改訂2版

Amazon

楽天

Sass＆Compass 徹底入門　CSSのベストプラクティスを効率よく実現するために

Amazon

楽天