プログラミング

【Mac】Sassをターミナルから使う方法

MacのターミナルからSassを利用する方法についてまとめました。
Gulpやエディタの拡張機能を使うなど色々あるのですが、今回はターミナルから実行する方法を紹介します。

※2018/09/05追記
使用しているエディタがVisualStudioCodeでしたら、拡張機能で簡単に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ファイルが自動的に作成されます。
既に同じファイルがある場合は上書きされるので注意。

最後に

Sassの使い方は書籍で体系的に学んでおくと、業務でも効率が上がるのでオススメです。