4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

AtraeAdvent Calendar 2016

Day 9

gulp+compass-mixinsで脱compassした話。

Last updated at Posted at 2016-12-12

表題のとおりです。
compass重すぎで仕事にならないのでlib-sassに移行しました。
その際の移行手順です。

Libsassが速いらしい。

ある朝、日頃からCompassの重さにうんざりしていた僕にlibsassという天使が舞い降りた。
http://sass-lang.com/libsass
LibsassはC++で書かれてるらしく、Rubyで書かれてるCompassに比べ桁違いに速いとのこと。
これは入れるしかない。
(1000倍速いとかなんとか…やばい速い http://www.webcyou.com/?p=7122

で、Compassはどうすんの?

Libsassがいくら速いとは言えCompassで使ってた便利ツールは使えない。良くも悪くもただのコンパイルツール。
かと言ってCompassのmixinを全部書き換えるのはめんどい。
ということでこれ。「compass-mixins」
https://github.com/Igosuki/compass-mixins

これでmixinはなんとかなるらしい。
ただspirte系の関数はそのまま対応してないから別途対応が必要。(ちなみに僕はsprite画像やめました。。)

これそのままsassのディレクトリに突っ込めばOK。

@import 'compass'

の書き方がそのファイルから見た相対パスになるのでファイルによっては

@import '../../compass'

とかになるのでエラーが出たら都度対応。(プロジェクトでかいと死ねる。。)

以上をGulpにまとめると

gulpfile.js
var gulp = require('gulp'),
    sass = require("gulp-sass");

gulp.task("sass",function(){
  gulp.src('assets/sass/**/**/*.scss')
      .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
      .pipe(gulp.dest('assets/stylesheets/'));
});

gulp.task('default', function(){
  gulp.watch(['assets/sass/**/**/*.scss'], ['sass']);
});

あ、はい。gulp-sassはデフォルトlibsassなので特別何かする必要はないです。
gulpについては別にググって頂ければと。

4
2
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?