joppot

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

プログラミング

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

投稿日:

Pocket

basstopthumb

概要

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

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

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

前提

npmが扱える
basscssがある

SPONSORED LINK


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のroutesでhttpのGETやPOSTを指定してルーティングを表示する

概要 みんさんこんにちはcandleです。今回は少し頭をひねれば分かる事ですが、少し迷ったので、記事にまとめました。 railsですごいwebアプリケーションを作っていると、ルーティングが複雑きわまり …

ruby on railsのckeditorをdeviseを用いて複数人で投稿できるようにする

概要 みなさんこんにちはcandleです。今回はckeditorの複数人投稿機能をdeviseを用いてやってみたいと思います。ckeditorを使うと分かると思うのですが、誰でも画像のアップロードや削 …

cakephp2.5.6をfabric+cuisineを使用してインストールする

概要 みなさんこんにちはcandleです。今回はcakephp2.5.6の環境構築をfabricを使用して、インストールしてみましょう。cakephpはrailsと比べると100倍くらい簡単に環境構築 …

phpのsnappyで複数のwebサイトのサムネイルを保存する

概要 前回、snappyの基本的な使い方を試しました。 今回はsnappyを使って、あらかじめ、定義してある複数のwebサイトのサムネイルを保存してみたいと思います。 前提 composerがインスト …

gitpythonでfirst commitする

概要 みなさんこんにちはcandleです。今回はgitpythonで、初めてのコミットをする方法を紹介します。 gitpythonでコミットは難しくないのですが、初めてのコミットは要領が違ったので、ま …

  • English
  • 日本語

プロフィール


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

スポンサードリンク

アーカイブ