Sassを基本からまとめてみた【便利な使い方】

公式サイト：Sass

Sassを利用するメリット

1. ネスト（入れ子構造）で記述できる
2. &(アンパサンド)の使い方
3. 変数が利用できる
4. .scssファイルを分割管理できる
5. コードを複数箇所で使用できる
6. メディアクエリ(ミックスイン（@mixin))機能が利用できる
7. カラーコードを便利に管理できる

1. ネスト（入れ子構造）で記述できる

sassでは、親の中括弧の中に下層のスタイルを書く事ができる

sample.sass

.area_article {
//セレクタ
 
padding: 30px;
//プロパティ　値

//ここに下層のスタイル
.text {
   margin: 20px 0 0;  
   .date{
     font-size: 12px;
     color: #999;          
    }
  }
}

2. &(アンパサンド)の使い方

親のセレクタを参照する事ができる書き方

sample.sass

.btn {
  color: #fff;
  background: #000;
  padding: 10px;
  &:hover {
//アンパサンド

color: red;
  }
}

参考サイト

SASSの超便利な使い方【HTML/CSSコーディング】