;
SERVICE

WindowsにSassを入れてみる

shadow
WindowsにSassを入れてみる

Author :  

shadow
WindowsにSassを入れてみる
  • Recruit
  • Recruit

同じようなCSSを書いているなら、Sassで効率化できます

こんにちは、
制作担当のコメダ(@rayfields)です。

サイトをリニューアルして初めての投稿です。

僕は、日頃HTMLやらCSSを書いていることが多いので、
その分野を中心に更新して行きたいと思います。

よろしくお願いします。

今回は、最近僕の心を鷲づかみにするSassを、
Windows環境にインストールして、CSSに変換するところまでを書いていきます。

環境のセットアップ

Rubyをインストール

Sassを使うにあたって、Rubyというものが必要になります。
インストーラーページから最新版をインストールします。

Sassのインストール

インストールしてできたRubyフォルダから
「Rubyコマンドプロンプトを開く」をクリックしてコマンドプロンプトを起動させます。

※通常のコマンドプロンプトでもできますが設定が必要なので今回はこちらを使います。

そして以下を入力します。

これで環境が整いました。

実際にさわってみる

環境ができたところで、実際にSassファイルを作成し、CSSに変換してみます。

Sassファイルの作成!

Cドライブにsampleという名前で作業用フォルダを作成し、
以下の内容で、style.sassファイルを作成します。

CSSに変換

コマンドプロンプトに戻ります。
まず、作業しやすように、ディレクトリを移動します.

SassをCSSに変換

そうすると、style.cssが生成され、
以下のように変換されます。

どうでしょう?これだけでも感動しませんか?
$baseColorの部分を変えれば一発で済むので、修正の時間が大幅に短縮出来ます。

しかし、毎回このコマンドを打つのは面倒なので
以下を入力します。

こうすることで毎回ファイルを保存するたびに自動的に変換してくれます。
終了させたい場合は、Ctr+Cを入力してください。

Sass参考サイト

SERVICE
  • sns