compassからSASSとAutoprefixer
よく使うCSS3のプロパティが正式採用されベンダープレフィックスを使う頻度が減りつつあったのに新しいプロパティが現れ再びベンダープレフィックスに悩まされるようになった。
「compassのmixinでええやん」という意見もあるかもしれないがcopassは結構前のブラウザまで対応してるので肥大化しがちだし、CSS-GRIDはcompassは未対応で手作業でベンダープレフィックスを入れるのはIEだけ数え方が違って面倒なのでAutoprefixerで自動化する事にした。
Autoprefixerは作成されたcssからベンダープリフィックスを取ったり追加したりするツールなのですが優秀なのはベンダープレフィックスを付けるか付けないかの判断に使うサイトCan I use…やブラウザシェアを参考にしてきめ細やかなブラウザ対応をしてくれるのでAutoprefixerを使うとベンダープリフィックスを付けるかどうかを考える事すらなくなる。
以前はPreprosが有料化したので乗り換えたに乗せたようにローカル環境（WindowsやMac）にsassを入れてバッチファイルからwatchコマンドで監視しscssをcssに変換していた。
Autoprefixerの導入方法は色々あるみたいだが今回はローカルサーバーにsassとAutoprefixerを入れてcompasで監視してsassでcss化し、そのcssをAutoprefixerでベンダープレフィックスを付ける流れにします。
まずはruby本体のアップデート
$ sudo update_rubygems
続いてgemのアップデート
$ sudo gem update
gemの一覧を確認したがcompassもautoprefixerも入ってませんでした。
$ gem list
compassのインストール（sassも勝手にインストールされます）
$ sudo gem install compass
なぜかruby.hに「mkmf.rb」が無いと言われてインストールが途中で止まったがgoogle先生の言うとおり「ruby-dev」を入れる（下記はDebianのstretch以降のインストールのコマンドなのでOSによって異なります）
$ sudo apt install ruby-dev
そして再度挑戦するとインストールできた。
$ sudo gem install compass
念のためインストール出来てるか確認。
$ sass –version
$ compass version
ようやく最後にautoprefixerをインストール
$ sudo gem install autoprefixer-rails
ここからは各サイトごとにcompassの設定ファイルを作成していく、cdで任意の場所に移動してcompassのcreateコマンドで設定ファイル「config.rb」を作成する。下記のようにcreateコマンドの引数で事前に設定する事も出来るが、あくまで「config.rb」を作成する為のコマンドなので間違えたら消してやり直せるし、viで書き直せる。
–sass-dir ： sassの格納場所
–css-dir ： cssの出力場所
–javascripts-dir ： javascriptの格納場所
–images-dir ： 画像の格納場所
–output-style ： 出力タイプ
–require ： ライブラリ読み込み
–bare ： デフォルトファイルを作成しない
$ cd /var/www/html
$ compass create –sass-dir “css” –css-dir “css” –javascripts-dir “js” –images-dir “images” –output-style “compact” –require “autoprefixer-rails” –bare
個人的には「.sass-cache」フォルダがコンテンツの場所に作成されるのがいやなので移動させる。（絶対パスにするとWEBルートからになるので相対パスで記述する）
$ vi config.rb
cache_dir = "../.sass-cache"次に本題のAutoprefixerをcssに変換されるタイミングで実行する。
browsers ： 対応ブラウザの指定「> 1%」はユーザーが1%以上いるブラウザ、「”last 2 versions”」は最近の2バージョンまでのブラウザ。さらにruby版には無いが「> 1% in JP」として日本でユーザーが1%以上いるブラウザという指定もできる。
grid ： css gridにもベンダープリフィックスを付けるか
flexbox ： flexboxにもベンダープリフィックスを付けるか
remove ： 既にあるベンダープリフィックスを削除するか
on_stylesheet_saved do |file|
css = File.read(file)
File.open(file, 'w') do |io|
io << AutoprefixerRails.process(css, browsers: ["> 1%","last 2 versions"] , grid: true, flexbox: true, remove: false)
end
end$ compass watch
Tags: autoprefixer, compass, ruby