HTML CSS

Sassの概要とインストール

Sassの概要

Sass(Syntactically Awesome Style Sheets)はCSSに変数や関数などの機能を追加したスタイルシート言語です。文法はCSSとほとんど変わらないため、学習にかかるコストはとても低いです。それでいて、一度使うとCSSに戻れなくなるぐらい便利です。また、コーディング効率やソースコードの保守性を向上させるのにも有用です。

SassにはSASS記法とSCSS記法の2種類が用意されていますが、後から追加されたSCSS(Sassy CSS)がCSSの記述に近く、最近はSCSS記法が主流です。
どちらの記法でもブラウザは解釈できないので、コンパイルしてCSSファイルを出力する必要がありますが、アプリを使ってコンパイルを自動化することができます。
また、SCSS記法であれば普通のCSSもそのままコンパイルできるため、最初は普通のCSSとして記述し、必要な際にSCSSの機能を利用するといった使い方もできます。

特徴
  • CSS互換
  • 読みやすい
  • 変数、入れ子、ミックスインなどの言語拡張
  • 作業の効率化
  • 可読性重視や、読み込み速度重視などカスタマイズ可能な出力

GUIソフトPreprosのインストール

Sassのコンパイルはnpm(Node Package Manager)というコマンドラインベースのツールがありますが、付随して様々なツールをインストールする必要があるため、最初は無料のGUIツールを使うのが良いと思います。GUIツールの中でお薦めなのがPreprosというアプリケーションです。

PreprosはSassのコンパイル以外にも様々な言語に対応し、なおかつローカルサーバも提供します。Preprosは無償で使えますが、有料のライセンスを購入するまでポップアップが表示されます。

インストールと使い方は下記を参考にしてください。
SassのGUIコンパイラ Prepros 【インストール&使い方】

Preprosのインストールが済んだら、Preprosを起動してください。PreprosでSassファイル関連を管理したい場合、アプリ左下の[+]ボタンを押して管理したいSassファイルがあるフォルダを選択するか、フォルダをPreprosにドラッグアンドドロップして追加します。

フォルダを追加すると自動でSassファイルなどが右カラムに表示されます。

Sassの使い方

  1. 任意の場所に test というフォルダを作成します。
  2. test.scss というファイルを作成します。
  3. Preprosを起動します。
  4. testフォルダをPreprosにドラッグ&ドロップします。
  5. Preprosのパネルに test.scss が表示されます。
  6. 右カラムにオプションが表示されるので、任意で設定します。
    アウトプットスタイルの選択は、圧縮してくれる Compact がおすすめです。
    ※コンパイルするアプリ(今回の場合はPrepros)は起動した状態にしておかないと、CSSが吐き出されないので注意。
  7. 試しに、以下のコードをtest.scssに記述してみてください。
    	.box{
    	    padding: 0;
    	    h1{
    	        font-size: 12pt;
    	    }
    	}
  8. ファイルを保存すると、自動的にscssファイルと同じディレクトリ内にtest.cssが作成されます。

関連記事