Windowsにsassを導入する為には、

事前にrubyがインストールされている必要があります。

以下の手順で説明していきます。

 

① rubyをインストール

② sassをインストール

③ sassのコンパイル

Windowsにrubyをインストール(導入)

Macではターミナルでrubyをインストールできるのですが、Windowsの場合は、コマンドプロンプトかPowerShellを使います。

私はPowerShellを使って説明していきます。

まず、rubyが既にインストールされているかどうか確認します

PowerShellを立ち上げて、以下のrubyのバージョンを確認するコマンドを入力してEnter

 

ruby -v

 

以下のようなメッセージが出ればrubyが入っていないという事なので、インストールが必要です。

 

rubyのインストール確認


 

 

rubyのサイトから最新版をダウンロードしてインストールしてください。

 

rubyのダウンロード


 

 

 

インストールの際は、以下にチェックが入っていることを確認してください。

 

rubyのインストール


rubyのインストール


 

 

インストールが終わったら、PowerShellを再起動させてから

再度rubyのバージョンを確認。

 

ruby -v

 

rubyのバージョン確認


 

 

上記のメッセージでrubyのバージョンが確認できれば、

インストール完了です。

Windowsにsassをインストール(導入)

sassをインストールするには、PowerShellに以下のコマンドを打ってEnter。

 

gem install sass

 

環境によってはファイアウォールでブロックされる場合がありますが、「アクセスを許可して」インストールを進めてください。

以下のようなメッセージが出たら、sassのインストール完了です。

 

sassをインストール


 

 

sassのバージョンを確認してみます。

バージョンが表示されたらsassのインストールは完了です。

 

sass -v

 

sassのバージョン確認



スポンサーリンク

WindowsでsassをコンパイルしてCSSに変換

sassのコンパイルを確認する為に、私は以下の環境を作りました。

Dドライブ直下に「sass_folder」というディレクトリを作って、そのの中にtest.scssというsassファイルを用意しました。

これをプロジェクトフォルダとします。

 

プロジェクトフォルダの用意


 

 

test.scssの中身は、sassの書き方に習ってセレクタをネストさせて書きました。

以下のような感じです。

 

sassファイルを準備

コンパイル

power shellでプロジェクトフォルダに移動して、

以下のコマンドでコンパイルします。

 
sass [コンパイル前ファイル]:[コンパイル後ファイル]
 
sass test.scss:test.css

 

 

sassのコンパイル


 

 

コマンド実行後にプロジェクトフォルダを見てみると、test.cssが生成されます

 

コンパイル後のプロジェクトフォルダ


 

 

test.cssの中身を確認すると、

改行が崩れていますが、内容はCSSの書き方で生成されています。

 

コンパイルでCSS生成

コンパイル(expanded)

綺麗に改行されたCSSを生成したい場合は、

以下のようにコンパイルコマンドに–style expandedを付加して実行します。

 
sass [コンパイル前ファイル]:[コンパイル後ファイル] –style expanded

 

sass test.scss:test.css --style expanded

 

 

expandedでコンパイル


 

 

test.cssが上書き更新されます。

CSSが綺麗に改行されて生成されます。

 

綺麗な改行でコンパイル

コンパイル(watch)

sassファイルを更新する度にコンパイルするのは手間がかかるので、

自動コンパイルの設定をします。

PowerShellで以下のコマンドを実行

 

sass –watch [コンパイル前ファイル]:[コンパイル後ファイル] –style expanded

 

sass --watch test.scss:test.css --style expanded

 

watchコンパイルでsassを監視


 

 

watchとは「監視する」という意味です。

sassファイルを常に監視していて、編集して保存すると、自動的にコンパイルが行われてcssファイルが上書きされます。

 

test.scssを編集して保存すると、リアルタイムでコンパイルされてtest.cssが上書きされます。

試しにtest.scssに1行追記して保存してみます。

 

sassファイルを更新


 

 

test.cssを開いて見ると、更新が反映されている。

 

watch監視によりCSSを自動更新


 

PowerShellで「Ctrl + C」キーを押すと自動更新がストップします。


スポンサーリンク