under consutruction

GruntでSass(.scss)の書式をチェックするプラグインを書いた

最近、人が増えた為に、他の方が書いたファイルのレビューをする機会が増えてきました。

コードの品質の維持、保守性を高めるには、コーディング規則・スタイルガイドなんかを整備するのが一番の近道なんですが、中々着手することが出来ず・・・。

とは言うものの、リリースするものに対して、最近ではhtml/css/jsの圧縮をかけるのがデフォルトになっているので、 基本的にはValidatorでエラーが出なければOKとしているんですが、Sass(.scss)については、どうしてもコンパイル前の物をチェックする為、どうしても共通のルールを作る必要がありました。

ただし、現状ではまだ共通のルールを決められていないので、ある程度自由度を持ってチェックできるような、Gruntのプラグインを書いてみました。

grunt-sass-format

Gruntについての詳細は、他に任せますが、一般的なGruntのプラグイン同様、

npm install --save-dev grunt-sass-format

でインストールされます。

オプションについて

indentChar

インデントとして使用する文字を指定します。

'\t'でタブ、' '(半角スペース)で半角スペースとなります。(それ以外の任意の文字でも構いませんが、一般的にはどちらかでしょう)

indentStep

インデント文字何文字を1つのインデントとするかを指定します。

タブなら1、半角スペースなら2 or 4、ご自身がお使いのエディタの設定等に合わせて指定して下さい。

blankLine

空白行の有無を判別します。

property

入れ子になっている部分の、プロパティ記述最終行〜次のセレクタ記述開始位置の間に対する空白行の有無を判別します。

close

閉じカッコ〜次のセレクタ記述開始位置の間に対する空白行の有無を判別します。

whiteSpace

セレクタ・プロパティ内での半角スペースの有無を判別します。

selector

セレクタ記述後のコンマ・カッコの前の半角スペースの有無を判別します。

property

プロパティ記述後のコロンの後の半角スペースの有無を判別します。

order

セレクタを1行に1つとするかを判別します。

debug

trueにすると、エラー以外の通知を表示します。

各種ツッコミ・フィードバック等々受け付けておりますので、よろしくお願いします。

オレオレ config.rb を晒してみる

.vimrcを晒す系エントリはたまに見かけるけど、config.rbを晒す、ってのは見ないなぁ、なんて思ったので、勢いで晒してみることにします。

これといって特殊なことはしてないですが、ちょっぴり解説。

sass_options = (environment == :production) ? { :debug_info => false } : { :debug_info => true }

output_styleと同様に、ChromeのDeveloper Toolsで、開発時にSassファイルの行数を表示させる為:debug_infotrueにしてます。

Sass::Script::Number.precision = 10

Sassの演算(除算)で得られる数値の小数点以下の桁数を増やす

詳細は上記エントリーから。

小数点以下の桁数を10としています。

on_sprite_saved do |filename|
...
on_stylesheet_saved do |filename|
...
on_stylesheet_error do |filename, message|
...

Configuration Reference - compass

スプライト画像保存時・CSS保存時・CSSエラー時に、ruby-growl を使って Growl で通知するようにしています。

sass-compile.vimの設定で、コンパイルが走る前後にも Growl で通知をしているので、

コンパイル → CSS更新 → コンパイル後と3段階で通知されるので、確実にファイルの更新を確認する事ができています。

Growl通知使ってる方をあまり見かけないので、参考になればと。

Sassでダミーテキストを生成するfunctionを書いてみた

コーディングを進める中で、テキストがアタリで来る時が多くあったので、空タグにテキストを挿入するfunctionを書いてみた。

もうちょっとスマートに書く方法もあったかもしれないけど、とりあえずこれでよしとする。

注意点

ダミーテキスト($base)は配列なので、1文字毎に半角スペース(もしくはコンマ)で区切って下さい。

英語の場合は、半角スペース・コンマ・ドットはバックスラッシュを付けてやらないと認識しません。(他の記号は試してないので分かりません)

Sassの演算(除算)で得られる数値の小数点以下の桁数を増やす

Sassと言えば、演算。

と言い切るのはちょっと大げさですが、よく使う機能の1つだと思います。

以前、line-heightを除算を用いて演算させたところ、ブラウザ毎で解釈が違う事がありました。

どうやらブラウザ毎に小数点以下の認識する桁数が違うという事実にまで辿り着きました。

Unformed Building
CSS の小数点以下の数値を各ブラウザはどのように解釈するか

Google Chromeが小数点以下10桁まで認識するので、Sassのデフォルトの桁数(Sassのバージョンによって異なります)では途中で切り上げられてしまい、本来欲しい結果と違う値になる可能性があります。

しかし、どこをどうしたら良いのか分からない・・・。

Sassのフォルダ内の全てのファイルを開いて確認したりしました(笑)が、公式のドキュメントに記載がありました。

Class: Sass::Script::Number
precision

結論としては、 Sass::Script::Number.precision を上書きしてやる事で実現出来ます。

config.rbに以下を追加。

Sass::Script::Number.precision = 10

保存後、コンパイルすると、指定の桁数になると思います。

number.rbをに記述がある事は突き止めたんですが、直接ソースを弄ってしまうとバージョンアップした時に上書きされてしまうので意味が無い。

config.rbに記述するという事実に気付くまで時間がかかってしまいました。

【追記あり】すぐにあーりん(佐々木彩夏)を見れるGoogle Chromeの拡張作った。

生きていればつらいことがある。
しかし、つらいからと言って簡単に投げ出す事は出来ないということも多い。

みなさんもつらまってる時、よくあーりん(佐々木彩夏)を見ると思う。
当然のごとく僕もそうである。

最近つらい事がよくある。
そんな時のために、あーりん(佐々木彩夏)を素早く表示する必要があった。
なので、あーりん(佐々木彩夏)をすぐ見れるGoogle Chromeの拡張を作った。

「だめだ。もうやってらねー」って時は、空の tab を表示すればすぐあーりん(佐々木彩夏)に会える。最高。結婚したい。

a-rin-tile.jpg

ysakmrkm / chrome-tumblr-tile

@soh335さんの件のエントリーを見て、git cloneしている自分が居た。
やってる事といえば、デフォルトのhostnameを変更しただけ。
反省はしているが、後悔はしていない。

ただ、これが今年初のブログエントリーであるという事については反省している。

- Inspired

追記

パッケージ化しました。

ダウンロードはこちらから