Sassについて勉強した

Yo!!

ってことで、勉強会でSassについて聞いてきましたよー勉強になったー！
そのまとめを書いてみた。

Sassとは

• CSSのメタ言語
• 変数が使える
• セレクタの入れ子 -> ネスト
• 別CSSの引用

環境構築

Rubyが実行できる環境が必要
installerあるので探してね

• 入れてRuby -v でバージョン確認
• gem install sass
• node.jsのインストール
• npm init
• npm install gulp -g <= グローバル環境にinstallされる
  or npm install gulp --save <= ローカル環境にはいる
• npm install gulp-sass -g
• gulpfile.jsをローカル環境に作成する

var gulp    = require("gulp");
    sass    = require("gulp-sass");
    plumber = require("gulp-plumber");

gulp.task("sass", function() {
    gulp.src("./sass/**/*.scss")  //scssのすべてのファイルを対象
    .pipe(plumber())    //gulpを止めないやつを先にやる
    .pipe(sass())       //Sass
    .pipe(gulp.dest())  //吐き出し先
});

gulp.task("default", function () {
    //sass配下の.scssを監視して、変更があれば第二引数のタスクを実行する
    gulp.watch("sass/**/*.scss", ["sass"]);
})

タスクランナーとは

sassファイルをコンパイルする作業などを自動実行するツール

アンインストール

npm uninstall [packagename]

インターポーレイト

$imagePath = "./fuga/hoge/tetete/";
.component {
    .bg {
        background-image: url(#{$imagePath}bg01.jpg);
    }
}

変数をhtml内で参照するためのもの？

gulpを止めない方法

plumberってのをinstallする
npm install plumber -g
npm install plumber --save

@mixin

androidでいう/styleの定義と似てる

@mixin test {
    color: red;
}

body {
    @include test;
}

定義をmixinするのですミックスインを

@import

外部ファイルを読み込みたいときに使用する
拡張子はいらない感じ

Webの世界もずいぶん楽しくなったね。 HTML4でホームページ作ってた頃と違うね。