このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

「compass」をやめて、爆速「Libsass」に変えたら作業が超捗った件。

CSS3

2016.06.11

この記事は最終更新日から1年以上が経過しています。

スクリーンショット 2016-06-11 11.23.56

「今は昔」

この業界は本当にサイクルが早い。

あんなに、「おお。なんだこれ、超便利ではないですか?」と言っていたものもすぐに「古く」なってしまう。

「compass」もその一つではないでしょうか。

いや、全然便利で使いたいのですが、何しろ

「コンパイルがクソ遅い。」

compassはご存知の通り、「Ruby」で作られています。

が故に、ちょっとSCSSの編集したいだけなのに、コンパイルにとても時間がかかってしまいます。orz

と、言う訳で「compass」はもう卒業しました。

卒業するのはいいのですが、代替えは何を利用するかと言いますと、「Libsass」ですね。

Libsass

スクリーンショット 2016-06-11 17.32.29

「Libsass」とはなんぞや。て方に。

C/C++で書かれたSass Compilerとなります。

当たり前で恐縮なのですが、C/C++で書かれているのでコンパイルの速度は、ビックリするぐらい「爆速」です!

Github

https://github.com/sass/libsass

公式ページ

http://sass-lang.com/libsass

まぁ、コンパイル時間を比較してもらえると。

compass

'compass' after11 s
Finished 'compass' after14 s
Finished 'compass' after13 s
'build.css' after11 s

libsass

'sass' after21 ms
'sass' after15 ms
'sass' after14 ms

なんだ、そんなに変わっていないではないか? と勘違いされた方もいたりするのではないでしょうか?

そんな方はよく見ていただけると w

「compass」のコンパイルは 10s、つまり10秒以上かかっているのですが、

「libsass」のコンパイルは 14ms〜21ms、単位が違います w

単位はmsで 1/1000秒となっております。秒に戻すと 0.014秒〜0.021秒となります。

その速度は、「compass」の約1000倍!! それは 爆速でしょう!!

では早速使ってみましょう!

git

git clone git@github.com:sass/libsass.git
git clone git@github.com:sass/sassc.git
export SASS_LIBSASS_PATH=/Users/hcatlin/path/libsass
./bin/sassc [input file] > output.css

と、sasscも、gitcloneしてきて使用するのですが、そのままだと使用するのに面倒です。

幸いにも色々な言語でWrapされていますので、今回はnodeで利用できるように「node-sass」を利用します。

スクリーンショット 2016-06-11 17.41.08

node-sass

node-sassは「libsass」をnodeで使用できるようにラップされたライブラリとなります。

スクリーンショット 2016-06-11 17.47.43

github

https://github.com/sass/node-sass

npm

https://www.npmjs.com/package/node-sass

npmコマンドでインストール可能です。

npm install node-sass
var sass = require('node-sass');
sass.render({
  file: scss_filename,
  [, options..]
}, function(err, result) { /*...*/ });
// OR
var result = sass.renderSync({
  data: scss_content
  [, options..]
});

と、すぐに利用できるのですが、さすがに毎回コンパイルの時にコマンドを叩く様なことはしないかと思います。

大体、ファイルをwatchして自動でコンパイルできる様にしているかと思います。

こういったタスクを自動化できるのがタスクランナーの役目ですが、そのタスクランナーの「gulp」でもすぐに「node-sass」を利用できる様にラップされた「gulp-sass」がありますので、そちらを使っていきます。(更にラップw)

gulp-sass

当方も、タスクランナーは「gulp」を利用していますので、基本こちらを使っています。

github

https://github.com/dlmanning/gulp-sass

npm

https://www.npmjs.com/package/gulp-sass

インストール

npm install gulp-sass --save-dev

基本使用

'use strict';
 
var gulp = require('gulp');
var sass = require('gulp-sass');
 
gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});
 
gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

compassをタスクに加えていた場合でも簡単に置き換えれるので非常に便利です。

と、いう訳で、コンパイルは爆速になったのですが、「compass」で便利な機能の一つである「ベンダープリフィックスの付与」が対応できないので

「gulp-autoprefixer」で対応します。

(「gulp-pleeease」と手がありますが今回はパス。)

gulp-autoprefixer

gulp-autoprefixerは、ベンダープレフィックスを自動で付与してくれるライブラリです。

github
https://github.com/sindresorhus/gulp-autoprefixer

npm

https://www.npmjs.com/package/gulp-autoprefixer

インストール

npm install --save-dev gulp-autoprefixer

使用方法

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
 
gulp.task('default', function () {
  return gulp.src('src/app.css')
    .pipe(autoprefixer({
    browsers: ['last 2 versions'],
    cascade: false
  }))
  .pipe(gulp.dest('dist'));
});

と、簡単に導入できます。

(使用方法の詳細は今回は割愛させていただきます mm)

autoprefixerは基本、Can I use をもとにベンダープレフィックスの有無を調べて付与していますが、オプションでブラウザやバージョンを指定することができます。

要件によっては「ベンダープレフィックス」が必要なかったり、必要だったりとするかもしれませんが、付与の有無を容易に変更することができ、柔軟性も高いのが特徴ですね。

まとめ

と言う事で、「compass」をやめた事で無駄なストレスもなくなり仕事も捗りました。

と、ここまで書いてきたのですが、実は「compass」もコアを「libsass」に置き換える予定なので利用されている方は無理に変更されず、待っていても

良いかもしれません w (ここまで書いておいて。)

その他にも、「静的サイトジェネレーター」をgo言語に置き換えたりする事によって、更なる「爆速環境」の元、作業を行えていたりするので、その事に関して次回機会があれば書かせていただこうかと思います。

動的言語でのコンパイルにもう限界!といった方には、静的言語で作成されたコンパイラーの使用を是非オススメしたいです!

ではではー。またまたー。

Comment

Related Article

CSS ファイル簡単生成。APBCSS ファイルジェネレーターツール「APB CLI」の使い方。

2017.06.18

「compass」をやめて、爆速「Libsass」に変えたら作業が超捗った件。

2016.06.11

「CSSが難しい。。」「CSSが面倒。。」 と言ったエンジニアさんにもオススメのCSS設計! 「APBCSS(Atomic Parts Base CSS)」が良い感じ!

2016.03.28

2016年は「AtomicDesign」を取り入れた「APB CSS(Atomic Parts Base CSS)」で迷わず、簡単、拡張性持った CSS設計を!

2016.01.02

CSS3アニメーション をスマートフォンサイトで 綺麗に作りたいあなたへ

2014.08.25

フロントエンド パフォーマンス向上について まとめ

2014.01.07

前回に続いて、SPEC vol.4で3位受賞しました。

2012.07.28

前回に続いて、SPEC vol.4に参加しております。

2012.07.15

CSS3のみでAjax風 ページネーション(ページ送り) JavaScript無し

2012.06.03

CSSでフォームパーツ(input,checkbox,etc…)をカスタマイズ

2012.06.03

CATEGORY LIST

LATEST NEWS

安い!軽い!早い! ノートPC(開発環境)。 Chromebookをついに購入いたしました!

Chromebook

2018.07.22

debian & Xserver XDSLで FireFoxが真っ白のページとなる件

Linux

2018.07.08

Kindle Fire HD 8 にLinuxを導入して扱えるようにする。超コスパ Linux タブレット構築方法!!

Linux

2018.07.04

Laravel 4 を PHP 7 環境へ移行したお話。

PHP

2018.06.10

iPhoneXで、ubuntuを動かす。

サーバー

2018.06.09

仮想通貨(暗号通貨)の作り方 その2 (Gethの使い方)

暗号通貨、ブロックチェーン

2018.05.20

$PAC (パックコイン)Macでマスターノードを建てる方法

暗号通貨、ブロックチェーン

2018.05.14

ついに「ウェブ帳」リニューアルしましたぁ!!!(PC 版)

イベント

2018.05.07

Raspberry Pi 3 Model B+ 2018 ニューモデルを購入!!

RaspberryPi

2018.04.23

仮想通貨(暗号通貨)の作り方 その1

暗号通貨、ブロックチェーン

2018.04.09

iPad Proで開発を行いたい。

iPad

2018.03.29

CPU使用しすぎて、Conohaからサーバーシャットダウンされた件。

tool

2018.03.28

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US