爆速の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

vccwのVagrant環境を別マシンに移行する方法

移行元での作業

boxイメージをイクスポートすることで、丸ごとバックアップする。
移行したい環境が入っているディレクトリに移動する
※vagrant upを実行しているディレクトリ
以下のコマンドでパッケージ化をする

$ vagrant package

すると、package.boxというファイルが生成される。
Vagrant環境のディレクトリを丸ごと、移行先にコピーする

移行先の作業

コピーしたVagrant環境のディレクトリに移動。
パッケージの登録

$ vagrant box add vccw-team/xenial64 package.box

登録されたかを確認

$ vagrant box list

このまま、初期化をすると、既存の投稿などが上書きされてしまうので、wordpressの初期構築をしないようにする。
以下のファイルを編集する。
provision/playbook.yml

---
- include: playbooks/commands.yml
- include: playbooks/middleware.yml
#- include: playbooks/wordpress.yml

最後の行をコメントアウトする。

初期化を行う

$ vagrant init vccw-team/xenial64

起動する

$ vagrant up

Via!
https://donow.jp/skillup/?p=1064