basscss v8以降にv7以前のスタイルを追加する（自分用メモ）

Tweet

概要

みなさんこんにちはcandleです。今回はbasscssのv8でかなりデフォルトのスタイルから削除されてしまったスタイルをインポートします。

v7以降からbasscssのスタイルはかなり分割されました。
v8でもv1.8.0とv1.8.2ではさらにスタイルが減りました。

使いかってが良かったv7の時のスタイルをv8にインポートします。

前提

npmが扱える
basscssがある

v7のスタイルを読み込む

昔のスタイルを全て読み込むためにはpackage.jsonのdependenciesに以下を追加します。

    "basscss-align": "^1.0.0",
    "basscss-background-colors": "^1.0.0",
    "basscss-background-images": "0.0.9",
    "basscss-base-buttons": "^1.1.0",
    "basscss-base-forms": "^2.0.0",
    "basscss-base-reset": "^2.0.2",
    "basscss-base-tables": "^1.0.0",
    "basscss-base-typography": "^2.0.1",
    "basscss-border-colors": "^1.0.0",
    "basscss-borders": "^2.0.2",
    "basscss-btn": "^1.0.1",
    "basscss-btn-outline": "^1.0.0",
    "basscss-btn-primary": "^1.0.0",
    "basscss-button-link": "^1.2.3",
    "basscss-button-outline": "^1.1.0",
    "basscss-button-sizes": "^1.0.6",
    "basscss-button-solid": "^1.0.0",
    "basscss-button-transparent": "^1.1.0",
    "basscss-color-base": "^2.0.0",
    "basscss-color-buttons": "^1.0.1",
    "basscss-color-forms": "^3.0.0",
    "basscss-color-forms-dark": "^1.1.0",
    "basscss-color-input-range": "^1.0.0",
    "basscss-color-progress": "^1.0.0",
    "basscss-color-tables": "^1.0.2",
    "basscss-colors": "^2.0.0",
    "basscss-defaults": "^2.0.1",
    "basscss-grid": "^1.0.3",
    "basscss-highlight": "^0.1.0",
    "basscss-input-range": "^1.1.5",
    "basscss-positions": "^1.0.4",
    "basscss-progress": "^1.0.5",
    "basscss-responsive-states": "^1.0.3",
    "basscss-responsive-white-space": "0.0.1",
    "basscss-table-object": "0.0.7",
    "basscss-type-scale": "^1.0.0",
    "basscss-ui-utility-groups": "^1.0.1",
    "basscss-utility-headings": "0.0.6",
    "basscss-utility-layout": "^2.0.3",
    "basscss-utility-typography": "^2.0.0",
    "basscss-white-space": "^1.1.2",
    "flex-object": "^2.0.1"

続いて、src/basscss.cssを開いて以下のコードに変更します。

@import 'basscss-base-reset';
@import 'basscss-base-forms';
@import 'basscss-base-tables';
@import 'basscss-base-typography';
@import 'basscss-color-base';
@import 'basscss-color-forms';
@import 'basscss-color-tables';
@import 'basscss-btn';
@import 'basscss-btn-primary';
@import 'basscss-btn-outline';
@import 'basscss-type-scale';
@import 'basscss-utility-typography';
@import 'basscss-utility-layout';
@import 'basscss-align';
@import 'basscss-white-space';
@import 'basscss-positions';
@import 'basscss-responsive-states';
@import 'basscss-grid';
@import 'flex-object';
@import 'basscss-borders';
@import 'basscss-colors';
@import 'basscss-background-colors';

@import 'basscss-defaults';

あとは以下のコマンドで作成できます。

npm install

するとcssフォルダが作成されて、そこにv7の時のスタイルが盛り込まれたbasscss.cssが作成されます。

まとめ

ミニマムにするのは良いのですが、basscssにはどこかにレシピを残しておいて欲しいですね。