SASSで文字コードの指定ができない!?の解決方法

Posted by MUTOU on Oct 14th, 2015

はじめまして！
8月31日から名古屋オフィスのホームメンバーとなった武藤です。
社内では最年長の44歳！4歳の娘がいるママです。
どうぞよろしくお願いします！

私が携わる最初のプロジェクトは、様々なシステムを組み合わせて設計されています。システムの縛りがあり、HTML/PHP/CSS/JSは、全てShift_JISにする必要がありました。
しかし、最初に作ったSASS+Compass環境では、SCSSファイルをShift-JISで保存しても、UTF-8で出力されてしまいます。

失敗例：Shift_JIS → UTF-8

UTF-8ではなく、Shift_JISで出力したい！

これが、私への最初の課題となりました。

はじめに準備した環境

Ruby 2.2.2（x64）
SASS 3.4.18
Compass 1.0.3

※2015年9月現在、スタンダードな方法でインストールできるバージョンです。

Googleで検索してみましたが、決定的な解決方法はなく、関連しそうなことをいろいろ試してみました。
環境変数の設定、config.rbに設定、.scssファイルをShift_JISで保存、Rubyを文字コード指定で起動、文字コードを指定してRubyの再インストール…..

調査を進めると、UTF-8で出力できるようにしたいという記事が多いことに気づきました。
全くの反対です。

バージョンダウンしたらできるかもしれない。。。

やっと見つけた原因はSASSのバージョン

あらゆる組み合わせでバージョンダウンを試しました。
怒涛のエラーと戦い、ついに見つけました。

SASSのバージョンを下げれば、Shift_JISで書き出し可能に！

テスト環境

Windows7 / Mac OS 10.10.5

バージョン

Windows: Ruby 2.2.3（x64） / Mac: Ruby 2.0.0p481
SASS 3.3.14
Compass: 1.0.3

SASSのバージョンダウンの方法

(1) 今入っているSASSとCompassのバージョン確認

C:\>sass -v
Sass 3.4.18 (Selective Steve)

C:\>compass -v
Compass 1.0.3 (Polaris)

(2) SASSとCompassのアンインストール
（CompassはSASSに依存するため、一旦両方削除する）

C:\>gem uninstall sass
C:\>gem uninstall compass

(3) 3.3.x の最新である3.3.14をインストール

C:\>gem install sass -v 3.3.14

(4) インストールされたバージョンを確認

C:\>sass -v
Sass 3.3.14 (Maptastic Maple)

(5) Compassは最新をインストール

C:\>gem install compass

(6) インストールされたバージョンを確認

C:\>compass -v
Compass 1.0.3 (Polaris)

これだけでは、まだ不完全です。

ファイルの修正

(1) .scssファイル

@charset "Shift_JIS"; /* 日本語でコメント */

を追加し、Shift_JISで保存

(2)config.rb

Encoding.default_external = "Shift_JIS"

の一行を追加
※Windowsではこれがないと@charset “Windows-31J”;に書き換えられる。

成功例：Shift_JIS → Shift_JIS

これで、動作確認できました！
同じような悩みの方がいるかもしれないと、記事にさせていただきました。

編集後記

Webのお仕事に携わって15年目となりますが、今までのやり方と違いすぎて、とても驚きました。
情報の整理と共有に、大きな比重が置かれているのです。

グランフェアズには様々な雇用形態があり、名古屋オフィスだけでなく、各地オフィスや在宅などで業務を行うメンバーがいます。
そのため、どこにいても効率的に情報を共有するために、様々な取り組みがされています。

誰がみてもわかるように情報整理がされていること
効率的に情報を共有するためのルールが決まっていること
それらが、どこにいても共有できること
環境を選ばすに業務が行えること

子供が小さいうちは、よく病気をします。
出社できないことは、しょっちゅうです。
予防接種をしても、インフルエンザ、おたふく風邪、水疱瘡など、長引く病気にもたくさんかかります。
これまでは、仕事関係とサポートを頼む親族に多大な負担がかかり、はがゆく苦い思いをしてきました。
多くの働くパパやママが、同じ経験をしたことがあるのではないでしょうか。

グランフェアズでは、その負担を最小限に、環境さえ作れば自宅でも業務を行うことができます。
実際は、子供がいる前ではそれほど仕事ははかどりませんが、できるのとできないのとは雲泥の差です。

このような環境で業務が行えることを、心から感謝します！！
この気持ちが仕事の成果として出していけるよう、日々精進したいと思います。
そして、子育てしながら働くことが、次に続く人への道をつくることに繋がれば嬉しいです。

はてな