SASSについて

SASSとは

結論、CSSプリプロセッサー技術の一つ。
cssをより使いやすくした技術のこと。

SASSのできること

• ネスト（入れ子構造）を使ってCSSが書ける
• 変数が使えて効率的な管理ができる
• よく使うCSSをパーツ化して使い回すことができる。

同じことを何度も書かなくていいので、効率的かつとても見やすくなる。

Sass(SCSS)の具体的な使い方

• ネスト

.container {
  h1 {
    color: red;
    font-size: 21px;
  }

  p {
    color: blue;
    font-size: 50px;
  }
}

• 変数

$main-color:red;

• mixin mixinは引数を渡すことができる。

$main-color:red;
@mixin name($bgColor) {       //パーツ化
  background-color: $bgColor;
  padding: 10px;
  color: blue;
}

.container {
  h1 {
    color: $main-color;
    font-size: 21px;
  }

  p {
    @include name(#000);      //@includeで呼び出し
  }
}

• & （アンパサンド）

    <ul>
      <li class="work">仕事</li>
      <li class="private">プライベート</li>
    </ul>

  ul {
    li {
      &.work{              //ワークのみが白で表示される
        color: white;
      }
    }
  }

• 四則演算

width: 100px * 2;       //四則演算も使える

• import

@import "ファイル名.scss";

よくあるファイルを読み込んで使う形式。

SCSSをコンパイル

ブラウザはSASSやSCSSを読み解くことができないため、CSSに変換(コンパイル)する必要がある。

コンパイルについては方法の選定や実際の設定がまだよく理解できていないので、別の機会にします。