Sass の基礎知識 | Sass | みどりのウェブ開発日記

Sass の基礎知識

カテゴリ: Sass

記事投稿日: 2017年2月20日



Sass のことを説明するための資料です。

概要

  • 公式: http://sass-lang.com/
  • Syntactically Awesome Stylesheets (構文的にイケてるCSS) の略で、「サス」と読みます
  • CSS を拡張したメタ言語 (Less, Stylus, Tass, PCSS などと同様)
  • 拡張子は .scss
  • scss のファイルをコンパイラで CSS構文に変換する(結果として.css のファイルを生成する)ことで使う

使用するためには、Ruby と Sass プログラムのインストールが必要です。

Sassのメリット

なぜSassを使うのかというと、CSSを単純に書くより、ずっと楽になるから、です。
まず、入れ子が使えます。

例えば、通常のCSSなら、セレクタを毎回書く必要があります。


#footer h1 {
    font-size: 20px;
}
#footer p {
    font-size: 12px;
}
#footer span {
    font-size: 10px;
}

上記の設定をSassで書くと以下になります。
これが「入れ子」です。


#footer  {
    h1 {
        font-size: 20px;
    }
    p {
        font-size: 12px;
    }
    span {
        font-size: 10px;
    }
}

どうでしょう。見た目にもすっきりして、関連性もはっきり分かるようになりました。
また、CSSでは、1行コメント(//)が使えませんが、Sassは使えるなど、
よりプログラミング的に使えるようになります。
また、変数や計算もできるんです。
初めてSass(正確にはLessでしたが)を知った時は、あんまり便利になるもので、興奮したものです。

現在、CSSのフレームワークの中には、Sass で記述されているものが少なくありません。
コンパイル後のCSSだけでなく、Sassも取得できると、フレームワークの根幹からメンテナンスできるので重宝します。

主な機能

  • ネスト(入れ子)が使えるので記述が簡素化できる
  • 1行コメントが使える
  • 変数を使って同じ値を使いまわせる
  • 色や値を操作するための多くの関数が用意されている
  • 四則計算が出来る
  • @extend を使うと同じセレクタを使いまわせる
  • @mixin を使うとモジュールのように定義し、引数を指定することも出来る
  • パーシャル機能で複数のSassファイルを一つにまとめることができる(HTTPリクエストを減らせる)
  • 条件分岐などの制御構文が扱える
  • if文や for文などの制御構文をサポートしている
  • ファイルサイズ圧縮のため、minify(compress)されたファイルを出力できる
  • 強力な compass フレームワークを使用できる。
  • ヘルパー、レイアウト、タイポグラフィ、グリッドレイアウト、スプライトイメージなどの豊富な機能をサポートしている

次回は、インストール方法を紹介します








コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA




トップに戻る