• HOME
  • CSSの次はSassを使って爆速コーディングをしよう

コーディング

CSSの次はSassを使って爆速コーディングをしよう

CND Okawa

CND Okawa

Sassとは?

Sassは「Syntactically Awesome StyleSheet」の略で

Syntactically = 構文的に
Awesome = 素晴らしい
StyleSheet = スタイルシート

CSSをより効率よく組むことが出来るよ!」といったものです。
記述方法はSASSとSCSSの2種類があり、SASS記法が先に作られ、後に作成された記法がSCSSになります。
なので弊社ではSCSSを採用しています。

SASSとSCSSとの違いとは?

作られたSassファイルの拡張子が.sassと.scssで違いがあります。
一番違いが感じられるのはSassの書き方です。

SASS記法


    .sample
        p
            color: #000
            .pick
                color: #fff
  

SASS記法はセレクタやクラスの後に{ }を使わず、また値の後の;を省略します。

SCSS記法


    .sample {
        p{
            color: #000;
            .pick {
                color: #fff;
            }
        }
    }
  

SCSS記法はネスト(入れ子)を主とした記法で、スタイルの書き方はCSSとさほど変わりません。

SCSSで出来ること

ネスト(入れ子)で書ける

Sassでネストしコンパイルすると、CSSでは下記のように変換されます。
クラス名の変更などがあったとき一カ所のみの修正でOKです。

コンパイル前


    .sample {
        p{
            color: #000;
            .pick {
                color: #fff;
            }
        }
    }
  

コンパイル後


    .sample p {
      color: #000;
    }
    .sample p .pick {
      color: #fff;
    }
  

変数が使える

「$〇〇」といったように変数を設定することが出来ます。
良く使う色をあらかじめ設定しておくなど、色々な場面で役に立ちます。
色変更があった場合も、変数のカラーを変更するだけでOKです。

コンパイル前


    $black:#000;
    $white:#fff;
    .sample {
        p{
            color: $black;
            .pick {
                color: $white;
            }
        }
    }
  

コンパイル後


    .sample p {
      color: #000;
    }
    .sample p .pick {
      color: #fff;
    }
  

@mixin

特定のスタイルを定義できるので、良く使うコードなど独自のテンプレートを作成することが出来ます。
先ほどの変数とも合わせて使えます。@includeで呼び出します。

コンパイル前


    $black:#000;
    $white:#fff;
    @mixin textColor {
        color: $black;
        span{
            color: $white;
        }
    }
    .aaa {
        p{
            @include textColor;
        }
    }
    .bbb {
        p{
            @include textColor;
        }
    }
  

コンパイル後


    .aaa p {
      color: #000;
    }
    .aaa p span {
      color: #fff;
    }
    .bbb p {
      color: #000;
    }
    .bbb p span {
      color: #fff;
    }
  

コメントアウト

「/**/」はコンパイル後のCSSにも記述が残りますが「//」で始まるコメントアウトはコンパイル後のCSSには残りません。

コンパイル前


    //文字色
    /*文字色*/
    p {
      color: #000;
      .pick {
        color: #fff;
      }
    }
  

コンパイル後


    /*文字色*/
    p {
      color: #000;
    }
    p .pick {
      color: #fff;
    }
  

その他にもセレクタの使い回しが出来るextend、演算、ifなど、CSSでは出来なかったことがSassでは出来るようになります!
デメリットとしては、Sassで記述した内容をCSSにコンパイルする必要があるので、そのための環境準備までに手間がかかります。

SassをリアルタイムでCSSにコンパイル出来るWEBサービスもあるので、導入前にここで実際に試してみるのもおすすめです!
https://www.sassmeister.com/

コーダーあるある


「ヘッターとフッダーにGoogleのタグ入れてください!」


「違いますよー!ヘッダーとフッターです。」
「【head(頭)er】【foot(足)er】とすると分かりやすいですよー!」


「ほぉ!なるほど…」

…とわかんなくなる事が、よくある。

フォローしていただけると嬉しいです!

ご相談・お問い合わせはこちら
page top