爆速のlibsassをインストールしてcompassも使える様にする方法

cssの記述は、compass(sass)で行ってきたのですが、コンパイルの時間がかかる様になり、調べると、libsassというC/C++で書かれたsassのポートがあるのを発見。確かに、その速度は雲泥の差です。速いです!

以下、Macへのlibsassのインストール方法です

libsassのインストール

macの場合、homebrew経由でインストールできる。
https://libraries.io/homebrew/libsass

$brew install libsass

sasscのインストール

次に、コマンドラインからlibsassを使えるためのコマンド(ドライバー)をインストール

$brew install sassc

インストールが完了後、動作チェック

$ which sassc
/usr/local/bin/sassc
$sassc -v
sassc: 3.4.1
libsass: 3.4.3
sass2scss: 1.1.0
sass: 3.4

compassのインストール方法

gemでインストールしたcompassから移行した場合、そのままでは、ミックインなどが使えなくなるので、別途インストールする。

npm install compass-mixins --save-dev

最後に、
node_modules/compass-mixins/lib以下のscssファイルを開発中のscssフォルダにコピーする

via!
http://www.webcyou.com/?p=7122

テキストを選択できなくする方法

<a>タグではなく、マウスイベントをjQuery経由でつけた場合、<div>の中のテキストが選択されてしまうのはよろしくないので、選択できないようにする方法。

scss(compass)で以下のようにミックスインで指定

@include user-select(none);

Sierraでsassとcompassをインストールする方法

macOS Sierraでsass & compassをインストール方法

gemのアップデート

$ sudo gem update --system

sassのインストール

Sierraでは、/usr/binにはインストールできないので、インストール先を指定し、/usr/local/binにインストールする。

$ sudo gem install -n /usr/local/bin sass

compassのインストール

$ sudo gem install -n /usr/local/bin compass

macOS Sierraでnodeを使えるようにする方法

homebrewでnodeをインストールする方法もあるが、開発環境としてパッケージのバージョン管理をしたいので、node専用のパッケージ管理環境 nodebrewを使用してインストールする

事前に、brew経由でnodeをインストールしている場合は、アンインストールする。

nodebrewのインストール

homebrew経由だと、うまく動作しない

$ curl -L git.io/nodebrew | perl - setup

環境変数にパスを通す

$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile

※.bash_profileが既存する場合は、修正もしくは追記する。

反映させる

$ source ~/.bash_profile

インストール可能なバージョンの一覧を表示

$ nodebrew ls-all

バイナリの安定版をインストール

$ nodebrew install-binary stable

インストール済みのバージョンを確認

$ nodebrew ls
v7.9.0

current: none

使用するバージョンを指定

$ nodebrew use v7.9.0

選択されているバージョンを確認

$ node -v
v7.9.0