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

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ファイルが自動的に作成されます。
既に同じファイルがある場合は上書きされるので注意。

  • このエントリーをはてなブックマークに追加
  • LINEで送る