CSSの記述が楽しくなるSassについてのメモ

CSSを入れ子にしたり、変数やif文を使って制御できるSassについて調べてみた。すでにCSS書けるなら直感的に理解できるし、Railsにはで標準で入ってるので即採用。

Sass概要

公式サイトはこちら。

Sass - Syntactically Awesome Stylesheets
トップにいる謎の熟女が魅力的！

記法が2種類(Sass, Scss)とあるけど、Scss(Sassy CSS)がメジャー。

gemとして配布されているので、インストールする。rubyが必要です。

gem install sass

Sassで書いたファイルの拡張子を.scssにして、.cssにコンパイルしてあげる。

sass style.scss:style.css

以下、主な機能のまとめです。公式サイトの記載順に並べてます。

[Nesting]入れ子にできる

直感的でわかりやすい。id:main配下のpにもcolor: redが適用されます。

#main{
    color: red;
    p {
      font-weight: bold;
    }
}

[Parent References]親要素を参照する&

「&」のついた部分がp:hoverと解釈されます。擬似要素や擬似クラスなんかを使う時に便利。

p {
    &:hover {
      color: red;
    }
}

[Variables]変数が使える

「$」使う。変数の種類は数値、文字列、色、真偽値、リストなどを扱えます。

$basecolor: "black";
#main {
  background: $basecolor;
}

[Operations and Functions][Interpolation]演算可能、変数の展開可能

四則演算ができます。また、#{$var}で変数が展開されます。

$maxWidth: 960px;
#main {
  width: #{maxWidth} - 200px;
}

[Mixin]

プロパティをまとめて管理できます。@mixinで定義して、@includeで適用。

@mixin color {
    color: red;
}

.label {
    font-size: 12px;
    @include color;
}

/* 引数も使える */
@mixin StrongFont($size) {
    font-weight: bold;
    font-size: $size;
}

[import]他のscssを取りこむ

取り込みたいファイル名の頭にアンダーバーを付けます。（例） _style.scss

一方、取り込むファイルで、@importを指定する。

@import "style";

２種類の書き方があります。

１つはCSSと同じ記法。複数行コメントもできます。

/* comment */

もう１つはSCSS専用の記法。こちらはCSSにコンパイルする際に除去されます。

// comment

ばくのエンジニア日誌

技術的なメモなどを書いていきます。