Sassつかってみた

# Sassとは

>Sassとは、Webページのレイアウトや修飾情報の指定に用いられるCSS（Cascading Style Sheet）を記述するための言語（メタ言語）の一つ。 また、同言語で記述したファイルをCSSファイルへ変換するソフトウェア。
https://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&cad=rja&uact=8&ved=0ahUKEwif7Jn9p5XNAhXiYqYKHf-fAiYQFggdMAE&url=http%3A%2F%2Fe-words.jp%2Fw%2FSass.html&usg=AFQjCNFKbkJwkhySFtQWvUp-YiNhI9K7jw&bvm=bv.123664746,d.dGo


- cssをプログラミングっぽく書ける。
- スタイルの使い回しが可能。
- 変数とか使える。

たとえば、これが↓

```css:css
.red-box {
  position: absolute;
  background-color: red;
  height: 100px;
  width: 100px;
  top: 0;
}

.green-box {
  position: absolute;
  background-color: green;
  height: 100px;
  width: 100px;
  top: 10;
}

.blue-box {
  position: absolute;
  background-color: blue;
  height: 100px;
  width: 100px;
  top: 20;
}
```

こう書ける↓

```scss:scss
@mixin color-box($top, $color){
  position: absolute;
  background-color: $color;
  height: 100px;
  width: 100px;
  top: $top;
}

.red-box {
  @include color-box(0, red);
}


.green-box {
  @include color-box(10, green);
}


.blue-box {
  @include color-box(20, blue);
}
```

使いまわせて便利！みやすい！

#Sassつかう

##環境構築

rubyをインストールする(ubuntu)

```
sudo apt-get install ruby
```

gemでsassをインストールする

```
sudo su -c "gem install sass"
```

※Sass3.5を使用する場合は、Ruby1.9.3だと以下のエラーが出るのでバージョンを上げる必要があるそうです。他のバージョンはわかりません。

```
Sass 3.5 will no longer support Ruby 1.9.3.
Please upgrade to Ruby 2.0.0 or greater as soon as possible.
```


##書いてみる

こんな感じのディレクトリ構成でやってみる。

```
sass_test/
 |
 |-src/
 |  |-sass/
 |
 |-dest/
    |-css/
```


```scss:sass_test/src/sass/hoge.scss
.hoge {
  background: red;
  .fuga {
    color: blue;
  }
}
```


##コンパイルしてみる
cssファイルにコンパイルしないと使えないので、sassコマンドでコンパイルします。

```
cd sass_test
sass src/sass/hoge.scss:dest/css/hoge.css
```

これを実行すると、dest/css/配下にcssファイルができる。
cssファイルの中身↓

```css:sass_test/dest/css/hoge.css
.hoge {
  background: red; }
  .hoge .fuga {
    color: blue; }
```


#gulpでコンパイルを自動化する

コンパイルだけでなく、圧縮とかその他いろいろできそうなGulpを使ってみます。

##環境構築

nodejsをインストールする。
↓この記事の手順でやるといいと思います。
http://qiita.com/seibe/items/36cef7df85fe2cefa3ea

gulpをインストールする。
sassやっとところのディレクトリでやります。

```
cd sass_test/
npm init
sudo npm install --global gulp
npm install --save-dev gulp
```

プロキシ環境下でやったときにかなりはまった。
詳しくは最後のほうにて書いてます。


##scssを自動でコンパイルする

次のファイルを作成します。


```js:gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function(){
  gulp.src('./src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dest/css'));
});

gulp.task('watch', function(){
  gulp.watch('./src/scss/*.scss', ['sass']);
});

```

src/scss/以下のscssファイルに更新があれば、dest/css/配下にcssファイルを作成するという内容です。
次のコマンドで実行します。

```
gulp watch
```

これで、scssファイルを更新するたびに、自動でcssに変換してファイルを作成してくれます。


#はまったところ

##npmのglobalインストール
プロキシ環境下でやったときにはまった。
`sudo npm install`するときに、プロキシの設定がうまくいってなかった。
次の2パターンで解決する。

##環境変数に設定

```
export HTTPS_PROXY=http://hoge.com:XXXX
```

(XXXX：ポート番号)

これで設定したあとに、環境変数を引き継いでインストールする。

```
sudo -E npm install --global gulp
```

##npm configに設定
sudo権限でnpm configを設定する。

```
sudo npm config set https-proxy=http://hoge.com:XXXX
```

これでインストールできる。

```
sudo npm install --global gulp
```

##ちなみに
コマンドが用意されているモジュールはグローバルにいれないと使えない。
ローカルだけに入れて使いたい場合は、この辺を参考するといいと思います。
http://qiita.com/Jxck_/items/8f5d1b70b7b5aa6053ee
http://qiita.com/kaminaly/items/3cd09306e8a33ead99f9