【Sassとは？】初心者向けに導入方法を解説
Sassの導入方法を解説
初心者の人はCSSでコーディングしている人が多いと思いますが、基礎を理解したあとはすぐにSassを導入した方が良いです。
理由はCSSよりもSassでコーディングした方が圧倒的に効率が良くなるからです。
「SassってCSSのレベルアップ版でしょ、自分にはまだ早いよ」なんて思っていましたが、実際に導入したら「何でもっと早く導入しておかなかったんだ…」と後悔しました。
なので初心者の方でまだSassを導入していないという人は、この機会にSassを導入しておきましょう。
Sassとは？
Sassというのは基本的にCSSなのですが、書き方がプログラミングっぽくて、入れ子状にコードを書いていきます。つまり、コードをシンプルに書くことが可能。
例えば
.parent{
background: red;
width: 100px;
}
.child{
font-size: 18px;
color: blue;
}
みたいな感じで.parentクラスの親要素と.childクラスの子要素に別々のCSSを当てて記載しますよね。
これがSassだと下記のようにコーディングします。
.parent{
background: red;
width: 100px;
.child{
font-size: 18px;
color: blue;
}
}
親要素の中に子要素のCSSも書くことができるので、分かりやすいですよね。
Sassについての詳しい情報がQiitaのコチラの記事で紹介されていたので参考にしてみて下さい。
Sassの導入方法
私の環境はmacでエディターはAtomを使用しています。今回は同様の条件での導入方法を紹介します。
導入の手順は下記。
- node.jsのダウンロード
- node-sassをインストール
- Atomでsass-autocompileをインストール
見慣れない言葉がたくさんでてきて難しいと感じるかもしれませんが、簡単なので安心してください。ひとつずつ説明していきます。
まずはnode.jsというものをダウンロードする必要があります。
node.jsのダウンロードはコチラ
リンク先からダウンロードするだけなので、ここで躓く人はいないと思います。
ダウンロードが完了したらmacに入っているターミナルを開いて下さい。
ダウンロードしたnode.jsの中にnpmというツールが入っているのですが、それが正しくダウンロードされているか確認しましょう。
- macに最初から入っているターミナルを開く
- ターミナルで
npm -vと入力してエンターを押す - バージョンを表す数字が表示されればOK
これでSass導入の下準備が完了しました。続いてそのままターミナルを使ってnode-sassをインストールしましょう。
npm install -g node-sass
上記の通りターミナルに入力してエンターを押すとインストールが完了します。間違えないようにコピペがオススメ。
しかし私はここでエラーが出てきました。同様の人もいるかもしれません。解決方法は簡単で、ターミナルで下記の通りやってみてください。
npm config get prefixと入力- /user/localと表示されるので
sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}
と入力しましょう
ここでパスワードを要求されるかもしれませんが、ご自身のmacで設定しているパスワードなので慌てる必要はありません。
完了したら再度インストールに挑戦してみましょう。
npm install -g node-sassと入力してnode-sass -vと表示されればOKです。
ここまでで少し疲れたかもしれませんが、もう一歩です。頑張りましょう。
次にAtomからSassを使えるようにする必要があります。これは非常にシンプルでsass-autocompileというパッケージをインストールするだけです。
手順は下記。
- Atomを開いてInstall a Packageを選択
- Open Installerボタンをクリック
- sass-autocompileと入力してインストール
これでSassが使えるようになりました。慣れない作業お疲れ様でした。
Sassってどう読み込むの？問題
私の体験からもうひとつ説明しておいた方が良いだろうなと思うことなのですが「Sassで書ける環境はできたけれどhtml側でどう読み込めばいいの？」と悩みませんか？
私の場合はそれが分からずにググったのですがそれでも求めている情報が出てこなかったので困りました。
最終的に試行錯誤して自力で解決したのですが、同様の人がいるかもしれないので少し補足しておきます。
ポイント
- ファイル名をstyle.scssなどで保存すると
style.min.cssというファイルができる - html側で
link rel="stylesheet" href="style.min.css"と読み込む
Sassで書いたファイルはファイル名.min.cssという形でCSSファイルに変換されます。
その変換されたCSSファイルをいつものようにhtml側で読み込めばOKです。
以上、補足でした。
初心者の人も今日からSassでスマートなCSSを書いていきましょう！