Sassについての学習

Sassとは

SassとはCSSの機能を拡張した言語である。Sassを利用することで、CSSを効率的にかけるようになる。SassはCSSに非常に似ているが異なる言語である。CSSを簡潔にかけるだけではなく、CSSの中で編集を使ったり、計算を行うことができたりする。

Sassファイル

Sassは通常のCSSファイルには記述することができない。反対にSassファイルにCSSを記述することはできる。Sassを扱うファイルの拡張子は.sassと.scssの2種類がある。どちらもSassのファイルとなるが記法が大きく異なる。

.sass拡張子

拡張子は .sass
__SASS記法__を扱うことができる。
SASS記法では波括弧の省略やセミコロンが不要
しかし、CSSの記法との差がありすぎた為かあまり普及しなかった。

SASS記法

.body p
  color: #333
  font-size: 15px
  font-weight: normal
  strong
    color: red
    font-weight: bold

.scss拡張子

.sassに後に作られたSassファイルが.scssの拡張子ファイルである。
CSSに非常に似た記法(SCSS記法)でSassの機能を使うことができる。今ではこの記法が主流である。
これからの説明はSCSS記法を用いる。

SCSS記法

.body p {
  color: #333;
  font-size: 15px;
  font-weight: normal;
  strong {
    color: red;
    font-weight: bold;
  }
}

記述の簡略化

● Sassのネスト構造
__ネスト__させることで、同じ親のセレクタをまとめることができる。
下記の例で見てみる。

sample.html

<div class="block">
  <h1 class="title">Hello world</h1>
  <p class="text">Sass is <span>great!</span>
</div>

CSSのスタイルで記述する場合

sample.css

.block {
  background-color: #000;
}

.block .title {
  color: #FFF;
  font-size: 70px;
  text-align: center;
}

.block .text {
  font-size: 15px;
  color: #FFF;
}

.block .text span {
  color: red;
  font-size: 20px;
}

Sassでセレクタをネストして記述した場合

sample.scss

.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;
    }
  }
}

プログラムのような処理ができる

Sassでは変数や条件分岐といったプログラムのような処理を記述できる。
● Sassにおける変数
変数の定義の仕方
$変数名: 値;
よく使うカラーコードや値は変数にすることであとで変更が楽になったり、コードが読みやすくなる。

Sassにおける変数

$section-color: rgb(30,30,30);
seciton {
  background-color: $section-color;
}

複数のCSSファイルを１つにまとめることが可能

Sassでは__パーシャル__という機能を使用して、複数のSassファイルを１つのCSSファイルとしてまとめられる。機能ごとにファイルを分割することができ、CSSを管理しやすくなる。
● パーシャル
パーシャルファイルの作成
ファイル名を_(アンダースコア)から始める。
パーシャルファイルの読み込み
@import ファイル名と記述する。

(例)

sample.scss

@import "reset";  /* _reset.scssを読み込む */
@import "header"; /* _header.scssを読み込む */

同じ値を使いまわすことができる

Sassでは__変数__を使うことによって、同じ値を使い回すことができる。
また、__mixin__という機能を使用することで、同じスタイルをまとめることもできる。

(例)

_variable.scss

$mainYellowColor: #FFEC00;  /* #FFEC00という色をmainYellowColorという変数名で定義する */

変数を定義してある_variable.scssを読み込むことで、_variable.scssに定義された変数を他のscssファイルで使用可能。

● mixin
まとまったスタイルを定義する機能
mixinの定義の仕方
@mixin mixin名() {}
.clearfixをよく使用することは多いと思うがその場合は、_clearfix.scss(ファイル名は自由)ファイルに定義しておく。

(例)

_clearfix.scss

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

・ mixinの呼び出しは@includeを使用して以下のように書く。

_sample.scss

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

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

これで以下のようなsample.scssのコードを同じになる。

_clearfix.scss

.menu {
  &:after {
    content: '';
    display: block;
    clear: both;
  }
  
  .menu__list {
    float: left;
    ...
  }
}

何度も同じような記述をしているものがあったら、mixinにまとめることを考えた方が良い。