<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>compass | ウダ2Blog</title>
	<atom:link href="https://uda2.com/blog/tag/compass/feed/" rel="self" type="application/rss+xml" />
	<link>https://uda2.com/blog</link>
	<description>大阪でフリーランスとしてWEB制作している管理人が気になった技術をメモったり、作ったツールの紹介などを綴っているブログです。</description>
	<lastBuildDate>Sat, 23 Jun 2018 09:19:11 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9</generator>
	<item>
		<title>compassからSASSとAutoprefixer</title>
		<link>https://uda2.com/blog/compass%e3%81%8b%e3%82%89sass%e3%81%a8autoprefixer/</link>
					<comments>https://uda2.com/blog/compass%e3%81%8b%e3%82%89sass%e3%81%a8autoprefixer/#respond</comments>
		
		<dc:creator><![CDATA[uda2]]></dc:creator>
		<pubDate>Sat, 23 Jun 2018 09:19:11 +0000</pubDate>
				<category><![CDATA[制作日記]]></category>
		<category><![CDATA[autoprefixer]]></category>
		<category><![CDATA[compass]]></category>
		<category><![CDATA[ruby]]></category>
		<guid isPermaLink="false">https://uda2.com/blog/?p=2241</guid>

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