Memo

Bourbon+Neat対応

mixin集。
Compassはメンテナンスされていないので、今はBourbonとNeatを使う方がいいらしい。
BourbonとNeat自体も過去のものかどうかは不明。
もしくは、そろそろ素直にCSS3を使ってもいいかもしれない。

■環境構築

※Bourbon+NeatはただのSCSSファイルに書かれたmixin集。
  よって別の環境で作成した bourbon と neat を使えば、Rubyのインストールなど環境構築は不要かも。

あらかじめRubyをインストール
http://rubyinstaller.org/downloads/
から「Ruby 2.4.3-2 (x64) 」をダウンロード。
「C:\ruby」にインストール。3つのチェックボックスにチェック。

>gem update --system
>gem install bourbon neat

>cd C:\Users\refirio\gulp-test			… プロジェクトのフォルダに移動。
>bourbon install
>neat install


作成された bourbon と neat を assets\sass 内に移動させる。（プロジェクトのフォルダ階層に合わせる。）

■Gulp設定

※この項目の手順は不要。
  以下のような手順が紹介されていることがあるが、設定しなくてもBourbonとNeatが使えた。

>npm install -D node-bourbon			… これは無くても動作するかも？


gulpfile.js					… このファイルの以下の変更は無くても動作するみたい？const bourbon = require('node-bourbon');	… Bourbonを読み込む。

      .pipe(sass({
        outputStyle: 'expanded',
        includePaths: bourbon.includePaths	… SASSで使用する。
      }))
■BourbonとNeatの使用

assets\sass\test.scss
@import "assets/sass/bourbon/bourbon";		… Bourbonを読み込む。
@import "assets/sass/neat/neat";		… Neatを読み込む。

.sample {
  @include clearfix;
}


Sassに慣れてきたら、mixin集「Bourbon」を使ってみよう！ ｜ Tips Note by TAM
https://www.tam-tam.co.jp/tipsnote/html_css/post8566.html

Bourbon - Documentation
https://www.bourbon.io/docs/latest/

Neat - Documentation for Version 2.1.0
https://neat.bourbon.io/docs/latest/■その他の参考サイト

RubyInstaller2でWindows環境にRuby 2.4 + Rails 5.0.2をインストールする - Qiita
https://qiita.com/jnchito/items/08b5be458134073c60e3

Gulp で SASS+Bourbon を自動ビルドする - Qiita
https://qiita.com/1000k/items/83e4ab79e0a00e68130e
解説で触れられている、plumberも試したい。

CSSフレームワークBourbon超速入門 - Qiita
https://qiita.com/nekoneko-wanwan/items/99d4650768c46ae41897

これからはじめるGulp #9：Ruby版Sassが使えるgulp-ruby-sassへの乗り換え ｜ Developers.IO
https://dev.classmethod.jp/client-side/javascript/gulp-solo-adv-cal-09/

Gulp で SCSS のコンパイルから bourbon の導入までを試す - Gulp で作る Web フロントエンド開発環境 #1 - PSYENCE:MEDIA
https://tech.recruit-mp.co.jp/front-end/getting-started-gulp-sass-bourbon/
Memo

Advertisement
