メモ > 技術 > 開発: Gulp > Compass導入について
■Compass導入について
※検証中だったが、導入しないほうが良さそう
Compass自体が使われなくなりつつある？Bourbonなど他のライブラリに移行されつつある？
Gulpから使う場合もRubyのインストールが必要になって煩わしい
Compassは動作が重いらしい
Compassを使っているとソースマップの出力ができない？
Compassを使っていると出力ファイル名を指定できない？方法はありそうな
Gulp で SCSS のコンパイルから bourbon の導入までを試す - Gulp で作る Web フロントエンド開発環境 #1 - PSYENCE:MEDIA
https://tech.recruit-mp.co.jp/front-end/getting-started-gulp-sass-bourbon/
「SCSS フレームワークである bourbon を導入します。
少し前までは Compass を使っていましたが、やや動作が重いのとベンダープレフィクスも以前ほど意識しなくてよくなってきたことから、
より軽量な Bourbon を使うことにします。」
SCSSと付き合う上でやって(知って)よかったこと8選 - Qiita
https://qiita.com/terrierscript/items/e996c42798bbb17add13
「Compassの導入は極力避ける
これは結構悩ましいが、個人的にはCompassを使わなかったことは正解かなと思っている。」
脱Compassしたいけど@importでCSSスプライトを作る機能は捨てがたかったので作った話 | GMOメディア エンジニアブログ
http://tech.gmo-media.jp/post/155044941185/create-css-sprites-library-like-compass
「もう完全に過去のものとなってしまったようです。」
Compass以外のSassのフレームワーク
http://blog.kzfmix.com/entry/1362478287
「Rubyの知識がないとコンパイル時になにやっているのかわからん」
Source MapでSass/Compassを簡単にCSSをデバッグする - to-R
http://blog.webcreativepark.net/2013/08/22-025321.html
「CompassはまだSource Mapに対応していない」らしい。今も？
イマドキのコーダー環境構築2016
https://www.slideshare.net/sou_lab/cssnitecordershigh2016
「Compassの終焉」
>gem install compass
>npm install -D gulp-compass
config.rb
cache = false
gulpfile.js
const compass = require('gulp-compass');
gulp.task('sass', function() {
gulp.watch(sass_sources, function() {
gulp
.src(sass_sources)
.pipe(compass({
config_file: 'config.rb',
comments: false,
css: 'css/',
sass: 'assets/sass/'
}));
});
});
一応動くようだが要調整
CSSファイル内で「@charset "utf-8";」の宣言が無いと、コンパイル時
「error assets/sass/style.scss (Line 1: Invalid Windows-31J character "\xE3")」
のエラーになった
次はWEBデザイナーがGulp+Compass+Sassでコーディング作業効率の良い環境を作ってみた[Mac] - Qiita
https://qiita.com/yancharica/items/41b3bf8e33c97c74b566
compassをgulpでコンパイルしてさらにCSS圧縮まで自動化しよう | ichimaruni-design
https://ichimaruni-design.com/2015/02/comapss-gulp/
gulpでsassをコンパイルするタスクを作る - yutaponのブログ
http://yutapon.hatenablog.com/entry/2014/09/11/100000