Sassを利用する方法についてまとめました。
やり方はwebpackや拡張機能を使うなど色々あるのですが、今回はターミナルから実行する方法を紹介します。
2018/09/05追記
使用しているエディタがVisualStudioCodeでしたら、拡張機能で簡単にSassが利用できるので、
以下の記事もおすすめです。
参考記事：【VisualStudioCode】拡張機能『Easy Sass』でSass使う方法
Sassのインストール
- 手順1 Rubyをインストールする(Macは最初からインストールされているので不要)
- 手順2 Sassをインストールする。ターミナルで以下のコマンドを実行。
sudo gem install sass
- 手順3 PCのパスワードを入力
Sassのコンパイル
- 手順1 .scssファイルを新規作成する
- 手順2 ターミナルでscssファイルの場所に移動し以下のコマンドを実行
sass --watch sass [ファイル名].scss:[ファイル名].css
//記述例(style.scssをコンパイルして、syle.cssを生成)
sass --watch sass style.scss:style.css
実行すると、scssファイル保存時に、cssファイルが自動的に作成されます。
既に同じファイルがある場合は上書きされるので注意。