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

.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

@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/

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ファイルの中身↓

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を自動でコンパイルする

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

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