hiyoko-programingの日記

プログラミングを勉強したてのひよっ子。　　　エンジニア目指して勉強中。

フロント実装　〜Sass〜

プログラミング・テキスト

Sassとは

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

Sassファイル

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

.sass拡張子

.sassの拡張子であるSassファイルでは最初に作られたSassの記法（SASS記法）を扱うことが出来る。SASS記法では波カッコの省略やセミコロンが不要などのモダンで非常にシンプルな記法という特徴がある。しかし、その分CSSの記法との差がありすぎてあまり普及しなかった。

SASS記法
1
2
3
4
5
6
7
 
.body p
  color: #333
  font-size: 15px
  font-weight: normal
  strong
    color: red
    font-weight: bold

.scss拡張子

.sassの後に作られたSassファイルが.scssの拡張子のファイル。こちらはCSSに非常に似た記法（SCSS記法）でSassの機能を使うことが出来る。今ではこちらの記法が主流。

SCSS記法
1
2
3
4
5
6
7
8
9
 
.body p {
  color: #333;
  font-size: 15px;
  font-weight: normal;
  strong {
    color: red;
    font-weight: bold;
  }
}

Sassのメリット

Sassには以下のようなメリットがある。

  • 記述の簡略化ができる
  • プログラムのような処理ができる
  • 複数のCSSファイルを1つにまとめることができる
  • 同じ値を使い回すことができる

記述の簡略化ができる

親子関係にあるセレクタを入れ子にして書くことができる。
CSSでは、親の要素から対象要素までのセレクタを何度も書く必要があるが、Sassはネストさせることで、同じ親のセレクタをまとめることができる。

 Sassのネスト構造

SassではCSSをネスト(入れ子)して記述することができる。ネストして記述することで深い階層になっても親子関係がわかりやすい、親要素を複数記述しなくて済むといったメリットがある。

以下のようなHTMLがある場合を考える。

sample.html
1
2
3
4
 
<div class="block">
  <h1 class="title">Hello world</h1>
  <p class="text">Sass is <span>greate!</span>
</div>

CSSでスタイルを記述する場合は以下のようになる。

sample.css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
 
.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
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
 
.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では変数や条件分岐といったプログラムのような処理を記述できる。そのため、CSSよりも柔軟なコーディングが可能となる。

例えば、Sassでは変数を利用することが出来る。

 Sassにおける変数

Sassでは、変数を使用することができる。例えばピクセル数やカラーコードなどの何度も使用する値を変数を定義することで、変数名で何度も使用することができる。変数を定義するには、$変数名: 値;のように記述する。

よく使うカラーコードや値は変数にすることで、あとで変更が楽になったり、コードが読みやすくなる。

Sassにおける変数
1
2
3
4
 
$section-color: rgb(30,30,30);
section {
  background-color: $section-color;
}

複数のCSSファイルを1つにまとめることができる

Sassではパーシャルという機能を使用することで、複数のSassファイルを1つのCSSファイルとしてまとめることができる。パーシャルを使えば機能ごとにファイルを分割することができ、CSSを管理しやすくなる。

パーシャル

パーシャルとは、分割したSassファイルのこと。ファイルを分割することで、機能や内容ごとに管理ができるようになる。一つのファイル に全てのスタイルを書くと膨大な記述になり、可読性が悪くなる。一定のルールでファイルを分割して開発することで変更・修正がしやすくなる。

パーシャルファイルを作成するには、ファイル名を_（アンダースコア）から始める。パーシャルファイルを読み込むには、@import ファイル名と記述する。
以下は、_reset.scssと_header.scssを読み込む例である。

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

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

CSSでは、複数の要素に同じスタイルを適用させる場合、何度も同じスタイルを書かなければならない。しかし、Sassでは変数を使うことによって、同じ値を使い回すことができる。
また、mixinという機能を使用することで、同じスタイルをまとめることもできる。

 変数

Sassでは、変数を使用することができる。
何度も使用する値を変数を定義することで、変数名で何度も使用することができる。
変数を定義するには、$変数名: 値;のように記述する。
以下は変数を定義するファイル、_variable.scssを使用して変数を定義する例。

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

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

 

 mixin

mixinとは、まとまったスタイルを定義することができる機能。
変数は値を定義するものでしたが、mixinはスタイルを定義するもの。
mixinを利用することで、何度も同じスタイルを記述する必要がなくなる。
mixinを定義するには、@mixin mixin名() {}のように記述する。

例えば、.clearfixはよく使用するので、以下のように_clearfix.scssファイルに定義しておく。

_clearfix.scss
1
2
3
4
5
6
7
 
@mixin clearfix() {
  &:after {
    content: '';
    display: block;
    clear: both;
  }
}

&(アンパサンド)は、擬似要素であるafterが適用されているセレクタを指す。以下の例では、&は.menuに相当する。
つまり、擬似要素afterは、.menuに対して適用されているということ。

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

_sample.scss
1
2
3
4
5
6
7
8
9
 
.menu {
  @include clearfix();
  ...

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

sample.scssの記述は以下のようなSassコードと同じ。

_clearfix.scss
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
 
.menu {
  &:after {
    content: '';
    display: block;
    clear: both;
  }

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

clearfixのように何度も使うcssはmixinとして用意することでCSSのコーディングのスピードが上がる。
何度も同じような記述をしていることに気づいたら、mixinにまとめられないか考えてみる。

Sassのファイル構成

Sassではパーシャルを使うことでscssファイルを分割して管理できる。役割ごとにファイルを作成したり、同じ役割のファイルをフォルダにまとめることでより管理がしやすくなる。

Sassを使用する場合のフォルダ構成の例

Sassを使用する場合、以下のようなフォルダ構成になることが多い。各ファイルやフォルダの使い分ける。

  •  projects
  •  index.html
  •  style.css
  •  stylesheets
    • style.scss
    • _reset.scss
    • config
    • mixin
    • modules
    • vendor
    • override

index.html

HTMLを記述するファイル。
このファイルに書かれたものが実際にブラウザに表示される。

style.css

style.cssは、htmlファイルでこのファイルを読み込むことでスタイルを適用させる。
style.cssファイルを直接編集するのではなく、sassコマンドを実行することでstyle.cssファイルを作成・更新する。

stylesheetsフォルダ

stylesheetsフォルダは、すべてのscssファイルを管理するフォルダ。
scssファイルを追加する場合は、stylesheetsフォルダ内に作成する

。

style.scss

このファイルですべてのscssファイルを@importで読み込むことで、一つのsassファイルに統合する。

以下は@importを使用してscssファイルを読み込む例。
ダウンロードしたプロジェクト内のstyle.scssに以下の記述を追加する必要はない。

style.scss
1
2
3
 
@import "reset";  /*_reset.scssを読み込む */
@import "./config/variable";　/* configフォルダの中の_variable.scssを読み込む */
...

_reset.scss

ブラウザによって初めからcssがそれぞれのhtmlに設定されている。
そのCSSによって、意図しないデザインになってしまうことがある。
そのようなことを防ぐために、初めにブラウザごとのCSSをすべてリセットする。
このようにブラウザごとのCSSを打ち消すCSSのことをリセットCSSという。

有名なリセットファイルは以下のようなものがある。
- YUI 3
- Eric Meyer’s
- HTML5 Doctor
- normalize.css

configフォルダ

configフォルダは、プロジェクトの設定ファイルや、scssで使用する変数を定義するファイルなどを管理するフォルダ。

mixinフォルダ

mixinフォルダは、scss内で使用するmixinファイルを管理するフォルダ。

modulesフォルダ

modulesフォルダはモジュールを管理するためのフォルダ。
モジュールとは、いくつかの要素をまとめた部品の集合という意味。
ヘッダー、フッターのような用途ごとに分けることができる。
モジュールを使うことでまとまったCSSを独立したものとして管理することができる。

vendorフォルダ

vendorフォルダは、ライブラリのファイルを管理するフォルダ。
cssにはライブラリと呼ばれるものがある。
ライブラリとはあらかじめCSSが書かれたファイル。
有名なCSSのライブラリでは、bootstrapがあげられる。
ライブラリを効率よく利用することで、コーディングのスピードが格段に上がる。

overrideフォルダ

overrideフォルダは、vendorフォルダに格納してある外部のライブラリを上書きするためのscssファイルを管理するフォルダ。