2016/8/18 最近環境を入れ直したのですが情報が足りていなかったので書き足しました。

最近はデザイナー間でも「CSSはSCSSで書く」というの当たり前になってきていますね。もう最前線から退いて、最新技術にはついていけなくなった身近のおばちゃんデザイナーも、普通にSCSSで書いててびっくりしました。これからのWeb制作スタンダードについていけるよう、きっちり導入していきましょう。

「SCSSとはどんなものか」というのは割愛しますが、仕様を理解してきたらもう通常のCSSには戻れない能率的な作業を行うことができます。

ここからはMac環境での導入メモをまとめていきます。

SCSS環境を導入する

SCSSは単純に.scssというファイルを作れば扱えるわけではなく、SCSSからCSSに出力するための環境をインストールしなければいけません。

これからSassを始めたい人へ!導入手順をまとめてみた(Dreamweaver対応)
http://liginc.co.jp/web/html-css/css/56599

ここのStep3までやっていきましょう。
初心者には敷居が高いように思えますが、解説を見ながら同じコマンドを打つだけなのでさほど難しくない。

OS X 10.11 (El Capitan) でSASSがインストールできない場合の対処法
http://qiita.com/zact1/items/13a2cfe982559b799d45

もしMacで導入の際にエラーが出てしまう場合はこの辺りも参考に。

Atomパッケージとnodebrewの導入

環境を導入したのはいいけれど結局.scssファイルはどうやって扱うの?コンパイル?よくわからない・・・って感じだと思います。一番シンプルでわかりやすいのは、コーディングしているツールで.scssを編集して、ファイルを保存した時に自動的に.cssが書き出される形。少なくとも私にはこれで十分だ。

これを実現するためにAtomにパッケージを導入します。
※日本語化前提で書いていきます

sass-autocompile
https://atom.io/packages/sass-autocompile

必要なのはこちらのプラグイン。けどその前に、このプラグインを使うには別途nodebrewが必要になる。
ターミナルでコマンドを入れていきます。コピペしてenterで良いです。

step1. nodebrewのインストール

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

step2. PATHの追加

export PATH=$HOME/.nodebrew/current/bin:$PATH

step3. PATHの読み込み

source ~/.bashrc

step4. node(安定版)のインストール

nodebrew install-binary stable

step5. 使用するnodeのバージョン指定

nodebrew use stable

この5つのコマンドを順番に打っていきます。一応、nodebrew listと打って、セットされているバージョンを確認してください。

nodebrewの確認

nodebrew help

nodebrewのアップデート

nodebrew selfupdate

ついでに必要になりそうなコマンドを上記に載せておきます。

node-sassのインストール

nodebrewを入れるとnpmというコマンドが使用できるようになります。これを使ってnode-sassをインストールします。

npm install node-sass -g

-gは「グローバル環境にインストールするよ」という指定で、必要なものになります。
node-sass -vと打ってバージョン情報が出てきたら正しくインストールされています。

ここまでの環境を再インストールする場合

step1. npmのアンインストール

npm uninstall node-sass -g
npm uninstall npm -g

そして、ユーザーフォルダ内に隠しフォルダとして.npmがありますので、中身をチェックして問題ないようなら残留ファイルをフォルダごと削除しましょう。

step2. nodebrewのアンインストール

これもフォルダを直接削除する方が早いので、ユーザーフォルダ内にある隠しフォルダの.nodebrewを削除します。

step3. 再インストール

nodebrewのインストールの工程から再度行ってください。

sass-autocompileの設定

atom-scss01

Compile on Saveでファイル保存時にcssファイルが書き出されるようになる。

Complile files ...Only with first-line-commentに設定すると「1行目にコメントが記述されているファイルのみcssを書き出す」ようになります。ちなみにコメントは!--ではなく//の方です。

atom-scss02

書き出すCSSは、軽量化したmin.css、通常の.css、あとよくわからんけどcompact.cssnested.cssが選べる。自動でmin.cssが書き出されるのは便利なので、これだけチェックを入れた。

設定はこれでOKなのですが・・・実際にscssファイルを保存してもエラーが出てしまいます。

atom-scss03

何かnodeがどうとか出るので、起動スクリプトを追加してエラーを解消します。

起動スクリプトの追加

atom-scss04

Atomのメニューから起動スクリプトを開く。init.coffeeというファイルが開かれます。

atom-scss05

一番下に下記のコードを追加。
****のとこはユーザー名。
このパスはMacでの話なのでWindowsではよくわかりません。

process.env.PATH = ["/Users/****/.nodebrew/current/bin", process.env.PATH].join(":");

これで.scss保存時に自動で.cssが書き出されるようになったはずです。

子のscssを保存した時に親のscssをコンパイルする方法

@importを使ってscssを分割していると、「子のscssを保存した時に親のscssが勝手に書き出されればいいのに!」と思いますね。気付くのに時間がかかりましたが、sass-autocompileパッケージにちゃんとそういうオプションが存在しました。

子scssの1行目に下記のようにコメントを記述すると、保存時に親scssがコンパイルされるようになります。「main:」の後ろに親のファイル名を指定します。

// main: ../styles.scss

ちなみにjsも

似たような感じで、.js保存時に自動的に.min.jsを書き出してくれるパッケージも使ってます。

atom-minify
https://atom.io/packages/atom-minify

設定で、JS→MinifierUgifyJS2に。

atom-scss06

で、別途下記のパッケージを入れれば動作するようになる。

uglify
https://atom.io/packages/uglify

このパッケージの不便なとこはJSとCSSで機能を個別にオンオフできない事。css→min.cssは不要なのに・・・。

これだけ能率的に作業できるともうDreamweaverになんか戻れない!