Sassでプログラミング的な処理が出来る

SassはCSSの拡張子で、その特徴としてプログラミングのような処理が出来る。
いくつかまとめてみました。。。

ネストが使える

同じセレクタを何度も記入する必要がない。
セレクタの変更があった場合でも修正が容易。

*例：bodyセレクタにCSSの記述を行う場合...

:hello.rails
.block {
   background-color: #000;
  .title {
    color: #FFF;
    font-size: 70px;
    text-align: center;
  }
  .text {
    font-size: 15px;
    color: #FFF;
    span {
      color: red;
      font-size: 20px;
    }
  }
}

CSSだとblock.title、block.textと記述しなくてはいけないが、ネスト構造にすることでセレクタの記述が不要になる。
メリット：①セレクタ名が変更になっても修正が容易になる。
　　　　　②可読性が上がる。

同じ値を繰り返し使える

変数

$変数名: 値;と記述することで変数が使用出来る。

$main-color:#000;
section {
  background-color: $main-color;
}

mixin

プロパティやセレクタをひとまとめにして繰り返し使用できる。

@mixin mixin名() {}

｛｝の中にプロパティやセレクタを記述

@mixin clearfix() {
  &:after {
    content: '';
    display: block;
    clear: both;
  }
}

上記をインクルード（読み込み）をすることで記述内容を引っ張り出せる。

@include mixin名(); {}

.menu {
  @include clearfix();
  ...

  .menu__list {
    float: left;
    ...
  }
}

複数のファイルをひとまとめに出来る

ひとつのファイルにすべての記述をすると膨大な記述量になってしまい、管理が難しく、可読性も悪くなってしまうため、パーシャルを利用し、ファイルを分けて作成し、後からひとまとめにすることが出来る。

パーシャル

分割したSassファイルのこと。
ファイル名を_（アンダースコア）
パーシャルファイルの読み込みを@import ファイル名で行う。

_reset.scss
<!-- 上記の名前でファイル名を作成。下記の記述で呼び出す -->
 @import "body";