コードの改善　Haml Sass

今回はコードの書き方を改善する言語について
書こうと思います。

# Haml Sass
ざっくりいうとhtmlとcssをより簡単にわかりやすくしたもの
です。railsでもgemで簡単に導入できます。

# Hamlとは
Hamlとは、HTMLよりも簡単に書くためのビューテンプレートエンジンです。
Hamlの記法に従って書くと、より少ない労力でHTMLを書くことができます。

### Hamlの導入

まず使用するgemは

```ruby:gemfile
gem "haml-rails"
```

導入したらすでにあるerbファイルを下のコマンドで変換します。

```bash:ターミナル
$ rails haml:erb2haml
```
ただしこれで上手く行かないことも多いの
上手く行かない場合は他のコマンドもお試し下さい。


# Sassとは
SassとはCSSの機能を拡張した言語です。Sassを利用することで、CSSを効率的に書けるようになります。

## Sassファイル

基本注目点は

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

基本例はこちら


### .sass拡張子

```sass:sass記法
.body p
  color: #111
  font-size: 20px
  font-weight: normal
  strong
    color: red
    font-weight: bold
```

### .scss拡張子

こちらだと{}と;の記述が必要になってきます。

```scss:scss記法
.body p {
  color: #111;
  font-size: 20px;
  font-weight: normal;
  strong {
    color: red;
    font-weight: bold;
  }
}
```
## sassの便利機能
sassには三つの便利機能があります。

* パーシャル・・・部分テンプレートの要領でコードを分割する。
* 変数・・・色指定など多用する内容の場合、指定して引っ張ってこれる。
* mixin・・・変数のようにスタイルを持って来れます。

### パーシャル

パーシャルとは、分割したSassファイルのことです。

パーシャルファイルを作成するには部分テンプレートの要領で
ファイル名を_（アンダースコア）から始めます。

パーシャルファイルを読み込むには、@import ファイル名と記述します。

```scss:scss
@import "reset";  /* _reset.scssを読み込む */
@import "header"; /* _header.scssを読み込む */
@import "./config/variable"; /* app/config/_variable.scssを読み込む */
```

### 変数

Sassでは、変数を使用することができます。
何度も使用する値を変数を定義することで、変数名で何度も使用することができます。

変数を定義するには、$変数名: 値;のように記述します。

```scss
$sampleColor: #FFFFFF;
```

### mixin

mixinとは、まとまったスタイルを定義することができる機能です。

変数は値を定義するものでしたが、mixinはスタイルを定義するものです。

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

```scss:_sam.scss
@mixin sample() {
  &:after {
    content: '';
    display: block;
    clear: both;
  }
}
```

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

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

```scss:_sample.scss
.menu {
  @include sam();
  ...

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

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

```scss:_sam.scss
.menu {
  &:after {
    content: '';
    display: block;
    clear: both;
  }

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

## sassの導入

Rails3.1より前の場合
RailsでSassを使うにはsass-railsというgemをインストールする必要があります。

Rails3.1以降からデフォルトでインストールされるようになっているため
rails newでプロジェクトを作成すればインストールされます。

app/assets/stylesheets/ に.scssの拡張子て作成すれば使えるようになります。

もっと具体的に書いていくと

1,application.cssは削除し、application.scssを作成します。(.scssになってるならそのまま)
2,コントローラー作成でコントローラー名.scssがすでに作成されている場合
　アンダーバーを先頭に付けて、_コントローラー名.scssにファイル名を修正。
3,下記のようにコードを書く

```ruby:application.scss
@import "コントローラー名";
```

4,リセットcssの導入のため
　_reset.scssを作成しコードを打ち込む
　YUI3などあるがダウンロードして中身を記述

　そして3のように記述

```ruby:application.scss
@import "コントローラー名";
@import "reset";
```


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

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

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

### stylesheetsフォルダ
stylesheetsフォルダは、すべてのscssファイルを管理するフォルダです。
scssファイルを追加する場合は、styelsheetsフォルダ内に作成しましょう。

### style.scss
このファイルですべてのscssファイルを@importで読み込むことで
一つのsassファイルに統合します。

以下は@importを使用してscssファイルを読み込む例です。
ダウンロードしたプロジェクト内のstyle.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ファイルを管理するフォルダです。