19
19

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.

CSSAdvent Calendar 2016

Day 6

速いsass、libsassについて超簡単な説明

Last updated at Posted at 2016-12-06

本当にかんたんにlibsassを説明

libsassはsassをC/C++で実装したライブラリです。オリジナルのsassはrubyで実装されています。libsassを使うメリットは主に以下の2点です。

  • sassに比べて高速かつ省メモリで動作する。
  • 特定の言語・実行環境に依存しない。

そしてlibsassはあくまでライブラリです。Node、Ruby、Go、Python等の言語から利用するにはlibsassが提供しているAPI(C言語)とのバイディングが必要です。

sass(Ruby)とlibsassの互換性について

libsassはsassの仕様に準拠しています。scssファイルをcssファイルへコンパイルするのに、ほとんどの場合でlibsass/sassのどちらを使っても問題なくコンパイルが出来ると思います。

ただし全くの同一ではなくサポートしている機能に若干の違いがあります。利用しているシンタックスやオプションによって挙動が異なる場合は以下のサイトを参考に解決して下さい。

Sass Compatibility
http://sass-compatibility.github.io/

libsassを試す/導入する

libsassはC/C++で実装されているので、試して見るにはこれをコマンドラインから利用できるようにしたsasscを利用するのが手っ取り速いでしょう。

libsass command line driver
https://github.com/sass/sassc

libsassオフィシャル(http://sass-lang.com/libsass) のWrappersに各言語で実装したラッパーへのリンクがあります。libsassの実装一覧(https://github.com/sass/libsass/blob/master/docs/implementations.md) も参考にして下さい。

もし利用している言語にlibsassのラッパーがない場合やshellから利用したい場合は、コマンドライン経由でsasscやnode-sassを呼び出すのがお手軽です。

Railsでlibsassを導入してみる

では実例として、Ruby on Rails にどのようにsasscを導入するのか手順を見てみましょう。

sassc-railsをgemに追加してbundle installすれば切り替え完了です。これだけで速くなります。

gem 'sassc-rails'

え?これだけ?となるので、もう少し見てみましょう。

sassc-railssassc-rubyを利用しています。このsassc-rubyはlibsassをバインディングをしています。以下libsassのモジュールlibsass.soをバインディングしている個所の抜粋です。

https//github.com/sass/sassc-ruby/blob/master/lib/sassc/native.rb
require "ffi"

module SassC
  module Native
    extend FFI::Library

    spec = Gem.loaded_specs["sassc"]
    gem_root = spec.gem_dir
    ffi_lib "#{gem_root}/ext/libsass/lib/libsass.so"

    require_relative "native/sass_value"

    typedef :pointer, :sass_options_ptr
    typedef :pointer, :sass_context_ptr
    typedef :pointer, :sass_file_context_ptr

libsass.soはRakefileの中でコンパイルされエクステンションとして利用できるようになります。

Rakefile
begin
  require 'bundler/gem_tasks'
rescue LoadError
  puts 'Cannot load bundler/gem_tasks'
end

require 'tasks/libsass'

task default: :test

desc "Run all tests"
task test: 'libsass:compile' do
  $LOAD_PATH.unshift('lib', 'test')
  Dir.glob('./test/**/*_test.rb') { |f| require f }
end

BSD/Solarisならgmake、Windowsならnmake、それ以外(Linux系)ならmakeコマンドを使ってビルドしていますね。nmakeって使われているんだ。

https//github.com/sass/sassc-ruby/blob/90ce13e4f06a32e842a90afdecfd52b603e00552/lib/tasks/libsass.rb
namespace :libsass do
  desc "Compile libsass"
  task :compile do
    if Dir.pwd.end_with?('/ext')
      libsass_path = "libsass"
    else
      libsass_path = "ext/libsass"
    end

    cd libsass_path do
      Rake::Task["lib/libsass.so"].invoke
    end
  end

  file "Makefile" do
    sh "git submodule update --init"
  end

  file "lib/libsass.so" => "Makefile" do
    make_program = ENV['MAKE']
    make_program ||= case RUBY_PLATFORM
                     when /mswin/
                       'nmake'
                     when /(bsd|solaris)/
                       'gmake'
                     else
                       'make'
                     end
    sh "#{make_program} lib/libsass.so"
  end
end

gemsassc-railsbundle installすると、依存するモジュールのsassc-rubyが自動的にビルドを行ってRailsからlibsassが使えるようになる訳ですね。

今回の説明例はRuby On Railsでしたが、他言語/フレームワークでも同じような仕組みでlibsassをサポートしていると思います。

まとめ

最近はCSSをビルドするのが当たり前になってきました。libsassは速い・軽量だけでなく各言語からも使いやすい設計になっています。試して問題がないようなら切り替えて行きましょう。

19
19
0

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
19
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?