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

2019/0926追記:初心者にはこちらがおすすめです。簡単!SASSの環境。 Visual Studio Code

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

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

SaSSって何?

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

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

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

コンパイルって何?

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

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

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

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

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

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

Atomの日本語化

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

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

Atom

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

Atom

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

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が作成され、入力した内容が記載されていれば成功です。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください