Sass(SCSS)の使い方 - 導入編

Sassの使い方

効率的にコーディングできる便利なSass(SCSS)の導入方法とターミナルでコンパイルする方法をまとめていきたいと思います。

Sassをインストール

Sassを使うにはまずRubyをインストールする必要があります。Macの人は標準でインストールされているので、インストールする必要はありません。Windowsユーザーさんはここからダウンロードしてインストールしてください。私は、Macを使っているのでMacでのインストール方法を紹介していきます。

まずはじめにターミナルを起動し、下記のコマンドを実行(Returnキーをポチッと)します。ユーザーパスワードを聞かれたら、Mac OSのユーザーパスワードを入力して実行。

$ sudo gem install sass

インストールが完了したら、下記のコマンドでバージョンの確認をします。Sass バージョン(数字)が正しく表示されれば、インストールの完了です。

$ sass -v

因みに、Rubyのバーションを確認したい場合は$ ruby -vとすれば確認できます。

コンパイルについて

Sass(SCSS)で書いたものはそのままだとブラウザが理解してくれないので、CSSに変換する必要があります。この変換するのことをコンパイルと言います。

ターミナルを使ってみる

まずはじめに、デスクトップ上に「sass」というフォルダを作成し、その中に拡張子が「.scss」というSassファイル、「style.scss」を作成して保存します。

次にターミナルのディレクトリをデスクトップ上の「sass」フォルダに移動させましょう。$ cdコマンドの後にフォルダまでのパスを入力して実行すると、ディレクトリを移動できます。

$ cd /Users/xxxx/Desktop/sass

※「xxxx」にはユーザー名が入ります。

ディレクトリの移動方法

フォルダまでのパスが分からない、もっと簡単に移動したいという時は、Dockにあるターミナルのアイコンにフォルダを「ドラッグ&ドロップ」するとディレクトリを移動することができます。新たなターミナル画面が開いたらディレクトリの移動完了です。

因みに、現在いるディレクトリの場所を知りたい時は$ pwdコマンドで確認できます。この様に、ターミナルは操作を行いたいファイルがあるディレクトリまで移動してからでないと操作が行えないので注意してください。

ターミナルでコンパイルする

それでは、「style.scss」を「style.css」にコンパイルするために、下記のコマンドを実行しましょう。

$ sass style.scss:style.css

すると、同じフォルダ内に「style.css」というファイルが出力されると思います。しかし、これだとSassファイルを更新する度にターミナルでコマンドを実行しなくてはいけなくなるので、正直面倒です。なので、ターミナルにSassファイルを監視してもらって、更新される度に自動でCSSファイルを出力してくれるようにします。

$ sass --watch style.scss:style.css

上記、コマンドを実行し、>>> Sass is watching for changes. Press Ctrl-C to stop.と表示されれば、自動的にコンパイルされるようになります。

コンパイル後のスタイル設定

下記を「style.scss」に記述してコンパイルすると、ネストでインデントされたコードが出力されると思います。

このコンパイル後のスタイルは4種類あって、コマンドで指定することができます。下記を参考に、好きなスタイルを--styleの後に指定してみてください。

コンパイル前

#main {
  width: 100%;
  p {
    margin: 10px 0;
    span {
      color: #ddd;
    }
  }
}

①nestedを指定(デフォルト)

$ sass --watch style.scss:style.css --style nested
#main {
  width: 100%;}
  #main p {
    margin: 10px 0;}
    #main p span {
      color: #ddd;}

②expandedを指定

$ sass --watch style.scss:style.css --style expanded
#main {
  width: 100%;
}
#main p {
  marign: 10px 0;
}
#main p span {
  color: #ddd;
}

③compactを指定

$ sass --watch style.scss:style.css --style compact
#main { width: 100%; }
#main p { margin: 10px 0; }
#main p span { color: #ddd; }

④compressedを指定

$ sass --watch style.scss:style.css --style compressed
#main { width: 100%; }#main p { margin: 10px 0; }#main p span { color: #ddd; }

これで、ターミナルを使って、Sass(SCSS)ファイルをCSSファイルにコンパイルすることができるようになりました。


SassからCSSにコンパイルする時、GUIコンパイラを使っている人も多いと思いますが、ターミナルでコマンドを叩くやり方も簡単だったので、是非試してみてください。

Leave a Comment