Sass 基本まとめ

Sassとは？

SassとはCSSプリプロセッサと呼ばれるもののひとつです。
ざっくりいうと、 CSSをより効率的に書けるようにした言語 です。
また、Sassの中には記法（書き方）がSASS記法とSCSS記法の2つがあり、それはファイルの拡張子で変わります。
SASS記法は .sass 、SCSS記法は .scss となります。詳しい書き方の違いは、このページの後半で説明しています。

Sassファイルを変換（コンパイル）することでCSSファイルが生成されます。

Sassを使うメリット
1.コードの記述量が減る
2.複数のCSSファイルを1つにまとめることができる
3.同じ値を使い回すことができる

style.sass

/* SASS記法（拡張子は .sass） */
.test
  width: 100px
  height: 100px
  &_title
    font-size: 32px
    font-weight: bold

style.scss

/* SCSS記法（拡張子は .scss） */
.test {
  width: 100px;
  height: 100px;
  &_title {
    font-size: 32px;
    font-weight: bold;
  }
}

これを変換（コンパイル）すると、下記になります。

style.css

.test {
  width: 100px;
  height: 100px;
}
.test_title {
  font-size: 32px;
  font-weight: bold;
}

Scss 実践的な書き方

『&』という演算子を使用することによって、より記述量を削減することができる。

親のclass名を引き継ぐパターン

style.css

.header {
  /* 省略 */
}

.header__logo {
  width: 80px;
}

style.scss

.header {
  /* 省略 */
  
  &__logo {
    width: 80px;
  }
}

親 > 子パターン

style.css

.header__list {
  display: flex;
}

.header__list li {
  margin-left: 30px;
}

.header__list li:first-child {
  margin-left: 0;
}

style.scss

.header {
  /* 省略 */
  
  &__list {
    display: flex;

    & > li {
      margin-left: 30px;

      /* 擬似クラスもこのように書く事が可能 */
      &:first-child {
        margin-left: 0;
      }
    }
  }
}

Variables: 変数

index.html

<script>

var maxWidth = '1000px';

</script>

例えばJavaScriptにおける変数は上記のように行いますね。 Sassの場合は変数名の頭に『$』を付けることにより、変数であることを宣言しています。

app.scss

$maxWidth: 1000px;

app.scss

$maxWidth: 1000px;
$brandColor: #cd6799;

.header {
  /* ...省略... */
  
  max-width: $maxWidth;  // 書き換え
  
  /* ...省略... */
  
  &__link {
    /* ...省略... */

    &:hover {
      color: $brandColor; // 書き換え
    }
  }
}

このように横幅やカラーコードなどの、共通して使うことが多いものに関しては、変数として定義し、修正がある場合はその定義したものを編集するだけで済むので、手間が省けるかつ編集漏れがなくて済む。

Extend: 継承

継承とは別のclassを呼び出して、その継承元であるプロパティや値を引き継ぐことができる行為。

app.scss

.parent {
  /* ...省略... */
}

/* 以下を追記 */
.children {
  &__ttl {
    @extend .parent__ttl;
  }
}

これで、.children__ttlというclassは.parent__ttlというclassの中身を受け継ぐことができます。 結果、生成されたCSSは以下のようになります。

app.scss

.parent__ttl, .children__ttl {
  color: #333;
  text-align: center;
  font-size: 20px;
  font-weight: bold; }

Mixin（ミックスイン） & Function: 関数

ミックスインはプログラミングの関数に近い。が、戻り値や型指定などがないのでさらに簡単。関数というよりCSSスニペットに名前を付けていつでもどこでも呼び出せるというイメージ。

ミックスインには名前とその中で使える変数名（ローカル変数）を指定する。ミックスインの便利なところはこのローカル変数にある。変数は変数名と値が一意だったが、ローカル変数を付けることでミックスインを使う場所によって値を変化させることが可能。

例えば、角丸のプロパティをセットしておき使用する場所ごとに値を変化させるという使い方ができる。今までは使う場所によってclassを指定したりしていたが、このミックスインのおかげでHTMLとCSSをいったりきたりせずに済むようになった。

app.scss

/*
ミックスイン
よく使うものをスニペットとして保存しておこう
*/

/* 
ミックスインの作り方
頭に@mixinを付ける

@mixin 名前($変数1,$変数2,...){

    プロパティ1:$変数1;
    プロパティ2:$変数2;
    プロパティ3:$変数1 $変数2 ...;
}
*/

/*
ミックスインの使い方 
頭に@includeを付ける

@include 名前(値1,値2,...);
*/


@mixin btn() {
  display: block;
  padding: 20px 30px;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  background-color: #20aee5;
  text: {
    decoration: none;
    align: center;
  }
}

.footer__sns__btn {
  @include btn(); // 『@include class名()』で呼び出し
}

参考

Sass(scss)の簡単な使い方まとめ