joppot

コピペで絶対動く。説明を妥協しない

プログラミング

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

投稿日:


basstopthumb

概要

みなさんこんにちは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"

dependancies

続いて、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';

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

npm install

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

まとめ

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

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-プログラミング
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

railsのcarrierwaveとremotipartで画像のアップロードを非同期にしjsonを受け取る

概要 みなさんこんにちはcandleです。今回はremotipartとcarrierwaveを使って画像のアップロードをajax化したいと思います。 railsのフォームはremote設定をするだけで …

react-lazyloadを使って画像を遅延ロードをする

概要 みなさんこんにちはcandleです。今回はreact-lazyloadを使って画像の遅延読み込みをしてみましょう。SPAにおける問題は最初の読み込み時の遅さです。その中でも画像が多いサイトになる …

railsのaws-sdk gemを使ってs3のファイルを削除する

by martinak15 概要 みなさんこんにちはcandleです。今回はs3にアップロードされている画像ファイルをrailsのaws-sdk gemを使用して削除してみたいと思います。 記事中で開 …

React NativeでGoogle Chrome上でのデバッグ時に動作が遅くなる場合の対処

English 日本語 概要 みなさんこんにちはcandleです。 今回はReact NativeのデバッグでChromeを使うと シミュレーターの動作が遅くなってしまう問題を対処します。 とは言って …

React webでreact-simple-formatを使う

概要 みなさんこんにちはcandleです。今回はreactでsimple-formatを使ってみたいと思います。simple-formatは割とRuby on Railsでは有名で、よく使われます。R …

  • English
  • 日本語

ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー