SASS

cssでSass-js方式を使用してみます.
プロジェクト規模の拡大に伴い、継続的に発生するコードメンテナンスを容易にするために発生する
すなわち,cssの限界を補うためにcssフロントプロセッサを用いる.

※cssプリプロセッサ（cssプリプロセッサ）

1. SASS

2. LESS

3. STYLUS

scssはsassの3番目のバージョンに追加され、sassのすべての機能をサポートし、css構文と互換性を作成します.

サンプルコード

// SASS

.wrapper
    width: 100px
    height: 200px
    .content
        color: white
        float: left

 

// SCSS

.wrapper{
        width: 100px;
        height: 200px;

            .content{
                color: white;
                float: left;
        }
}

それ以外は

$変数を使用して共通属性を再使用できます.
例)

$white-color: #fff;

@mixin→関数を定義する場合は、共通属性のセットとして再使用できます.
例)

@mixin btn-style{

        width: 100px;

         height: 100px;

         background-color: white;

}
.signup-btn{

         @include btn-style;

}

@importファイルを複数のカテゴリに分けてインポートできます.コードの回収とメンテナンスに役立ちます.