【初心者・デザイナー向け】AtomでSassを使う環境をつくる

自宅作業では無料のAtomエディタを使用している私。職場ではかなか腰を据えてSassの練習ができないので、自宅で練習しようと思いSassを導入しました。インストールにあたり、デザイナーや初心者向けの記事が見つけられずつまずいたりしたので、導入手順をまとめておきます。

もし、簡単にSassをコンパイルできるエディターを探しているのなら、拡張機能をインストールするだけですぐ使える無料エディターVScode（Visual Studio Code）がおすすめです。

Sassとは
Sassを使うには
AtomでSass環境をつくる（Mac）

Sassとは

Sass(サス)とはcssを効率よく書けるようにした言語のこと。cssを書いていると、継承で何度も似たようなclassをコピペしたり、作業途中でキーカラーが変更になってひとつずつ対象のスタイルを書き直したり…めんどくさいー！と思ったことはありませんか？ Sassはそんなcssの煩わしさを解消できる便利な言語です。

最初にちょっとだけSassの書き方を覚える必要がありますが、cssと近い書き方になっているので初心者やデザイナーもとっつきやすいと思います。

※SASSにはSASSとSCSSという記法があって、下はSCSSというCSSっぽい書き方のものです！

Sassを使うには

.sassまたは.scssというファイルを編集し、「コンパイル」という作業をすることで.cssファイルを書き出します。この「コンパイル」をするためにはタスクランナーかコンパイラーアプリが必要になります。
が、このへんの細かいことはよくわからないので今回はAtomでSassを使う場合の手順を書きます。

ちなみに私が職場で利用しているDreamweaverCCには、2017から標準搭載されているのでSASSファイルの作成からコンパイルまで簡単な設定だけで使えるようになります。インストールやら何やらをせずすぐ使えるのは嬉しいですよね。Dreamweaverを使っている方はぜひ調べてみてください。

AtomでSass環境をつくる（Mac）

さて、早速AtomでSass環境をつくる手順です。

Atomの「sass-autocompile」というパッケージ（拡張機能みたいなやつ）を使ってSassを使えるようにします。
まずコンパイルができるようにするための準備として「Node.js」と「node-sass」のインストールが必要になります。

Node.jsをインストールする

Node.jsの公式サイトから「Node.js(推奨版)」をインストールします。これは指示に従って進めばOK。
Node.jsとはPHPやJavaのようにサーバーサイドで動くjavascriptだそうです。

node-sassをインストールする

Node.jsのインストールが完了したら「node-sass」をインストールします。node-sassはNode.jsを動かすためのものだそうです。

ここで問題が。調べてもコマンド（ターミナルという名のあの黒い画面）でしかインストールする方法が探せませんでした。いつも意地でもコマンドは触るまいとしていた私だったのでここで諦めようかと思いました…が、腹をくくってコマンドに挑戦してみることにしました。

なのでこれをご覧のデザイナーさんや初心者さんもこの手順どおりに試してみてください。そんなに難しくありません。

コマンドの使い方は、まず「アプリケーション＞ターミナル」からターミナルを起動します。

起動して少し待つと何やら自動で文字が出てくるので、その続きから下記の命令文を入力してEnterを押します。

npmというNode.jsのパッケージを管理しているツールからnode-sassパッケージをインストールしますよという意味です（たぶん）。

npm install -g node-sass

ここでエラーが出てしまった場合

ここで私はERR!の文字が並んでしまいました。

npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
 npm ERR! path /usr/local/lib/node_modules
 npm ERR! code EACCES
 npm ERR! errno -13
 npm ERR! syscall access
 npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
 npm ERR! { [Error: EACCES: permission denied, access '/usr/local/lib/node_modules']
 npm ERR! stack:
 npm ERR! 'Error: EACCES: permission denied, access \'/usr/local/lib/node_modules\'',
 npm ERR! errno: -13,
 npm ERR! code: 'EACCES',
 npm ERR! syscall: 'access',
 npm ERR! path: '/usr/local/lib/node_modules' }
 npm ERR!
 npm ERR! The operation was rejected by your operating system.
 npm ERR! It is likely you do not have the permissions to access this file as the current user
 npm ERR!
 npm ERR! If you believe this might be a permissions issue, please double-check the
 npm ERR! permissions of the file and its containing directories, or try running
 npm ERR! the command again as root/Administrator (though this is not recommended).

アクセス権限がないからnpmのディレクトリにアクセスできないよという意味だそうで、下記を参考に権限を変更しました。

npmでpermission deniedになった時の対処法[mac]
https://qiita.com/okoysm/items/ced3c3de30af1035242d

エラーを解消する STEP①

ターミナルで下記を入力。npmのディレクトリのパスを確認します。Enterを押して「/user/local」と出ればOK。（出なかったら上記のリンクの「対策２」を試してみてください）

npm config get prefix

エラーを解消する STEP②

npmのディレクトリのアクセス権を自分に変更します。下記をそのままコピペしてEnter。この呪文の意味はよくわかりません。

sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

もう一度node-sassのインストールを実行します。

npm install -g node-sass

node-sassがインストールできたかを確認

インストールするとこんな感じの文字がでてくると思います。

/usr/local/bin/node-sass -> /usr/local/lib/node_modules/node-sass/bin/node-sass
> node-sass@4.11.0 install /usr/local/lib/node_modules/node-sass
> node scripts/install.js

最後に、インストールの完了の確認は下記のコマンドでできるそう。

node-sass -v

こんな感じでバージョンが出てきたらインストール完了です。

node-sass 4.11.0 (Wrapper) [JavaScript]
libsass 3.5.4 (Sass Compiler) [C/C++]

Atomで「sass-autocompile」をインストールする

ようやくAtomで「sass-autocompile」をインストールです。『command+ , 』で「設定」を開きます。「Install」項目から「sass-autocompile」を検索してインストールします。

これで完了です！AtomでSassを使いたい方はぜひ試してみてください。