refirio.org

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
