初心者にも！無料のAtomエディタでSASSを使う

私はDreamweaver CS6ユーザーでしたが、あまりに古いのでSASS(※）が使えません。Dreamweaver CS6に手を加え、Preprosと合わせ技で使っていましたが、Preprosに3千円程払わないと、年中売り込みのポップアップが出てきて疲れてしまいました。Dreamweaverも重くて死にそうだったので、昨年からAtomを使い始めました。そして、Nodeを使いコンパイル(※）出来る様にしました。ちょっと慣れてきたので、皆さんにも使って欲しいと思います。

このブログでは難しい事はあまり書きません。私のような初心者が分かった事、必要最小限知っていた方が良い情報だけ書く事にします。

追記：使いやすいVistual Studio Codeもおすすめです。

あわせて読みたい

Visual Studio Code (VSC)とSASSの環境とコンパイル SASSを使うなら、エディターは Visual Stidio Code (VSC)が超簡単！無料ですし、初心者でも怖がらずにインストールできるのでお勧めです！Atomよりも軽い様にも思います…

SaSSって何？

wikiによると、読み方は「サス」ではなく、「サース」だそうです。

Syntactically Awesome Stylesheets　の略で（構文が素敵なスタイルシート）という感じでしょうか？
そうなんです！結構ステキです。CSSが分れば概ね理解できる、CSSを使いやすく、メンテナンス性も良くした感じスタイルシートです。

拡張子は.scssで、そこに書いたsassのコードは、普通のCSSに変換され.cssファイルに書き出されます。

コンパイルって何？

.scss → .cssに書き出す？処理する？変換する？そんな感じの作業を「コンパイル」と言います。

コンパイルするには、ただファイルを保存すれば出来る訳ではなく、出来るようにするには、環境を整える必要があります。これが面倒なんです。あれや、黒いコマンド画面でこれやインストールして、初心者には辛いのでパッケージが無いかと探しました。

※ コマンド画面-コマンドとは指令の事で、windowsの場合は「スタート」→ [プログラムとファイルの検索]に「cmd 」と入力する。若しくは、「スタート」→ 「すべてのプログラム」→ 「アクセサリ」の「コマンドプロンプト」でも開けます。

無料のAtomeエディターをインストールする

拡張機能も充実している無料のWindows用のエディターです。少し重いように思いますが、古いDWよりはマシです。DW的な事は出来ますし、満足です。

The GitHub Blog

Sunsetting Atom We are archiving Atom and all projects under the Atom organization for an official sunset on December 15, 2022.

Atoｍ　サイトの世界観が可愛いです。ダウンロードしたら、普通にインストールします。特別な事は無いので極普通にデフォルトのままインストールします。

Atomの日本語化

Atomを起動して、「Sttings」からインストールを選択。通常は起動直後、Sttingsは左端に出ていると思います。出ていなかったら、Ctrl+,(カンマ）　で表示されます。

検索窓に「japanese」と入力すれば「japanese-menu」が表示されるので、インストールし「Enable」(有効）にします。

こんな風に日本語に表示になります。

これで、使用できるようになりました。シンプルが故、慣れるまで分かりにくいのでネットで検索してみて下さい。

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

ここから、コンパイル出来る様にする準備をします。Node.jsは、ざっくり言うと　処理をしてくれるJavaScriptのようです。JavaScriptというと、何か動きを付けたりとか・・・というイメージですが、Node.jsはJavaScriptなのにPHPやJavaのような働きも出来るそうです。

Node.js　から「推奨版」をダウンロードし、普通にインストールします。特に問題なく、ただ進むだけです。ちょっと時間がかかりますが心配しなくて大丈夫です。

先程書いた「コマンド画面」を開いて
カーソルがある所から、そのまま半角スペースと「- 」に気を付けて以下のコマンドを入力して[Enter]

node -v

バージョンはどうでも良いのですが番号が表示されればOK。同様にパッケージされているnpmも確認します。

npm -v

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

node-sassは、Node.jsを動かく為の物だそうです。これで.scssが扱えるようになります。

コマンド画面で以下のコマンドを入力して[Enter]

npm install -g node-sass

そのまま、コマンド画面インストールの確認

node-sass -v 

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

Atomを起動し、日本語化した時と同様に「sass-autocompile 」と検索し、インストール、有効化します

コンパイルのテストをする

適当なフォルダを作成し、新規で拡張子を.scssのファイル　例：test.scssを作ります。

Atomで開き、何か入力します。何でも良いです。[Ctrl]と[S]キーを押して保存します。すると、コンパイルされ同フォルダ内にtest.cssが作成され、入力した内容が記載されていれば成功です。