Sass?Compass?とは?

# 1. はじめに
[Compass](http://compass-style.org/)
[参考](http://chriseppstein.github.io/blog/2009/09/20/why-stylesheet-abstraction-matters/)

割とバックエンドとか決済とかお硬い方の仕事が多かったのですが、Web系キラキラエンジニアの地位を目指して流行をおさえて行きたいと思います。

## 1.2 SCSSについて
1.Sassはrubyで利用できる、CSSの拡張書式
2.Rubyのgemとして導入できて、ruby内のモジュールを拡張する事で機能を付与できる
3.CSS3の拡張で、ネストルール、変数、ミックスイン、セレクタ、継承などを機能をサポートしている
4.Sassはよくフォーマットされたスタイル・シートを出力するので保守性が高い

もともとcoffeeなどのトランスクリプト系は苦手というかあんまり意味ないと思っていますが、Sassだけは下記の機能が使える事から賛同します。

## 1.3 実行環境について
今回は、NodeJSとrubygemを利用します。
NodeJSはGruntで使います。GruntからRubyGemのCompassの機能を利用する形です。

# 2. サンプル
## 書式
[こちら](http://qiita.com/one-a/items/2758511326c09200fded)を参考にすると分かりやすいです。

| prefixsyntax | 機能 |
|:-:|:-:|
| $ | 変数定義と利用  |
| @mixin  | mixin定義 |
| @include | mixinの呼び出し |
| 関数名() | rubyの関数呼び出し |
| @extend | スタイル継承 |

## 2.1.入れ子にできる
#### SASS
```
.container
  background-color: red
  .span1
    background-color: pink
    .span2
      background-color: orange
```
#### CSS
```
/* line 2, ../../src/sass/test1.sass */
.container {
  background-color: red;
}
/* line 4, ../../src/sass/test1.sass */
.container .span1 {
  background-color: pink;
}
/* line 6, ../../src/sass/test1.sass */
.container .span1 .span2 {
  background-color: orange;
}
```

## 2.2.変数が使える
#### SASS
```
$article_font_color: #333
.article p
  color: $article_font_color
```
#### CSS
```
.article p {
  color: #333;
}
```

## 2.3.関数が使える
rubyでちょいちょいコーディングするだけで関数を定義できる
ruby内のdarken関数を呼び出すサンプル

#### SASS
```
$base: blue
$highlight: lighten($base, 25)
$shadow: darken($base, 50)
div.box
  background-color: $base
  border:
    width: 2px
    style: solid
    colors: $highlight $highlight $shadow $shadow
```
#### CSS
```
/* line 18, ../../src/sass/test1.sass */
div.box {
  background-color: blue;
  border-width: 2px;
  border-style: solid;
  border-colors: #8080ff #8080ff black black;
}
```
#### Ruby
```
def darken(color,amount)
	hsl = Compass::Colors::HSL.form_color(color)
	hsl.l *= 1.0 - (amount.value _ 100.0)
	hsl.to_color
end
```

## 2.4.mixinが使える
mixinとは端的にいうとfunctionみたいなもので、引数を取る事ができたり、他のcssセレクタから参照できます。mixinからmixinの参照も可能です。
下記のサンプルでは、ネストも利用しています。

SCSS

```
@mixin border($color:#666)
  border-bottom: 1px solid $color

#header
  @include border(#999)

  #gnav
    overflow: hidden
    @include border
```

CSS

```
/* line 29, ../../src/sass/test1.sass */
#header {
  border-bottom: 1px solid #999;
}
/* line 32, ../../src/sass/test1.sass */
#header #gnav {
  overflow: hidden;
  border-bottom: 1px solid #666;
}
```

## 2.5.ループが使える
シンプルにループです。

SCSS

```
@for $i from 10 through 11
  .fs#{$i}
    font-size: #{$i} px
```

CSS

```
/* line 38, ../../src/sass/test1.sass */
.fs10 {
  font-size: 10 px;
}

/* line 38, ../../src/sass/test1.sass */
.fs11 {
  font-size: 11 px;
}
```
## 2.5. 継承が使える
SCSS

```
.box
  margin-top: 15px
  padding: 10px
  background-color: #ccc
  p
    line-height: 1.3
.contentsBox
  @extend .box
  background-color: #eee
```
CSS

```
/* line 42, ../../src/sass/test1.sass */
.box, .contentsBox {
  margin-top: 15px;
  padding: 10px;
  background-color: #ccc;
}
/* line 46, ../../src/sass/test1.sass */
.box p, .contentsBox p {
  line-height: 1.3;
}

/* line 48, ../../src/sass/test1.sass */
.contentsBox {
  background-color: #eee;
}
```

# 3. 導入
NodeJS +Gruntで導入したいと思います。
プロジェクトディレクトリを作成して、そこ中に、rubyの.bundleとnode_modulesがインストールされるようにします。
[Grunt](http://gruntjs.com/getting-started)
[参考](http://qiita.com/u-minor/items/c61e383646d60dae29f3)

## 3.1 インストール
今回はSCSS -> CSSの挙動を確認するために、シンプルなインストール設定を行います。
[Grunt](http://gruntjs.com/getting-started)というパッケージャーを利用します。
他にも、
1.JSをつなげる(grunt-contrib-concat)
2.難読化や圧縮したり(grunt-contrib-uglify)
3.CSSを圧縮したり(grunt-contrib-cssmin)
色々できるので、おいおい利用していければと思います。

### 3.1.1 rubyのgemをインストール
プロジェクト用のディレクトリをしてその下に移動して作業をします。

```
# Gemfileを作成
bundle init
vi Gemfile
gem 'sass'
gem 'compass'
bundle install
```

### 3.1.2 node_modulesをインストール
1.grunt(grunt)
2.ディレクトリ監視(grunt-contrib-watch)
　　　ファイルが更新されると自動的に再コンパイルが走るようにします。
3.Compass(grunt-contrib-compass)
4.Task管理(load-grunt-tasks)
5.Webサーバー(grunt-contrib-connect)
　　　ウェブサーバーを立ち上げます。

```
## nodeJSをインストール
# package.jsonを作成
npm init
# NodeJSライブラリインストール　libraries
npm install grunt-contrib-compass grunt grunt-contrib-watch grunt grunt-contrib-connect load-grunt-tasks --save-dev 
# grunt-cliのインストール
npm install -g grunt-cli

```

## 3.2 Gruntfile.jsの設定
Gruntfile.jsを下記のように設定します。

```js:Gruntfile.js
module.exports = function(grunt) {
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.loadNpmTasks('grunt-contrib-connect');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    //Gruntの設定
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        compass: {
            development: {
                options: {
                    config: 'config.rb',
                    environment: 'development',
                    bundleExec: true
                }
            },
            production: {
                options: {
                    config: 'config.rb',
                    environment: 'production',
                    bundleExec: true
                }
            }
        },
        watch: {
            compass: {
                files: 'src/sass/*',
                tasks: 'compass:devel'
            }
        },
        connect: {
            local: {
                options: {
                    keepalive: true,
                    port: 9000,
                    base: 'src'
                }
            }
        },
    });
    //defaultタスクの定義
    grunt.registerTask("development", ["compass:development" ,"watch" , "connect"]);
    grunt.registerTask("production", ["compass:production"]);
    grunt.registerTask("msg", function() {
        //ログメッセージの出力
        grunt.log.write('Logging some stuff...').ok();

    });
};
```

## 3.3 gruntの実行
```
grunt development
```

を初回に実行すると、 dist/stylesheets/以下にファイルが吐き出され、サーバーが立ち上がります。その後は、監視している'src/sass/'以下のファイルが変更されると自動でコンパイルして書き出しされます。

```
[murotanimari]$ grunt development
Running "compass:development" (compass) task
    write dist/stylesheets/ie.css (0.001s)
    write dist/stylesheets/index.css (0.001s)
    write dist/stylesheets/print.css (0.001s)
    write dist/stylesheets/screen.css (0.01s)

Running "watch" task
Waiting...
```

# 4.早速ためしてみよう
上記のサンプルを利用して出力を確認してみましょう。
サンプルを実行するにあたり、追加で下記のgemをインストールします。
[compass-colors](https://github.com/chriseppstein/compass-colors)はSASSから利用可能なrubyライブラリ提供してくれています。readme通りにイントールしましょう。

## 4.1 下準備
### 4.1.1 Gemfileに追加
```
vi Gemfile
gem "compass-colors"
bundle install
```
### 4.1.2 configに設定を追加
```
vi config.rb
# Require any additional compass plugins here.
require 'compass-colors'
```
### 4.1.3 サンプルコードをコピペー
[2.3.関数が使える]()をコピペする事で先程インストールしたcompass-colorsの関数群が使えるようになります。

#5 今回のサンプル
今回のサンプルは下記にアップしてあります。
今回は、SCSSとCompass部分のみ実装してますが、JSの部分の更新したいですね。
[SASSのサンプル](https://github.com/MariMurotani/Node1st/blob/master/src/sass/test1.sass)
[Grunt.js](https://github.com/MariMurotani/Node1st/blob/master/Gruntfile.js)