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

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

関連記事

phpmyadminでmysqlデータベースの照合順序を変更する

概要 みなさんこんにちはcandleです。 ちょっとした事なのですが、意外に分からなかったのでまとめました。 phpmyadminを使ってデータベースを作ると、うっかり、utf8_general_ci …

Mysqlのdatetime型とtimestanp型で保存されているデータを年月日だけを指定して任意の日にちのデータを取得する方法

概要 みなさんこんにちはcandleです。今日はmysqlのdatetime型とtimestanp型におさめられているデータの取得を紹介します。 datetimeやtimestanpは多くの場合下のよ …

CakePHPでhelloworld

概要 CakePHPでプログラミングのお約束helloworldを行いましょう。 helloworldとは動作確認も含めた、一番最初に書くプログラムコードです。 だいたいはhello worldと単純 …

macでreact nativeの環境構築をして、iosアプリのhello worldをする

概要 みなさんこんにちはcandleです。 今回は、react nativeの環境構築をmac上で行い、iosアプリでhello worldをしてみたいと思います。 react nativeはreac …

railsのcoffee scriptをurl判定をして実行をする方法

概要 みなさんこんにちはcandleです。 今回はcoffeescriptを任意のURLで実行する様にする関数を作ります。 というのはrailsは最終的にassetspiplineでjavascrip …

  • English
  • 日本語

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