概要
みなさんこんにちは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にはどこかにレシピを残しておいて欲しいですね。