joppot

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

ソフトウェア

basscssのオプションで切り離されたスタイルをnpmでインストールする

投稿日:2016年2月9日更新日:

Pocket

bass_css_option_style_top_thumb

概要

みなさんこんにちはcandleです。今回はbasscssのコアスタイルに記述されていない、スタイルの読み込みを行います。

basscssはv7あたりからnpmを使用して、スタイルを作成するようになりました。それまでは、スタイルが記述されたcssがあったのですが、今はimportのみが記述されています。

デフォルトのコアなスタイルのみを使用する方法は以下の記事を参照してください。

basscssのcssファイルをnpmで作成する

前提

npmがインストールされている


bassのダウンロード

githubのサイトからダウンロードします。
https://github.com/basscss/basscss

「Download Zip」ボタンからダウンロードできます。
ダウンロードしたら、解凍します。

ターミナルを開いて、解凍したフォルダに移動します。


オプションのbassのスタイルを使用する

bassのコアなスタイルから切り離されたものは下記のものです。
‘basscss-all’
‘basscss-background-colors’
‘basscss-background-images’
‘basscss-border-colors’
‘basscss-btn-outline’
‘basscss-btn-primary’
‘basscss-btn-sizes’
‘basscss-btn’
‘basscss-colors’
‘basscss-darken’
‘basscss-forms’
‘basscss-highlight-dark’
‘basscss-highlight’
‘basscss-input-range’
‘basscss-base-forms’
‘basscss-base-reset’
‘basscss-base-tables’
‘basscss-base-typography’
‘basscss-color-base’
‘basscss-color-forms’
‘basscss-color-input-range’
‘basscss-color-progress’
‘basscss-color-tables’
‘basscss-defaults’
‘flex-object’
‘basscss-responsive-white-space’
‘basscss-utility-headings’
‘basscss-lighten’
‘basscss-media-object’
‘basscss-progress’
‘basscss-responsive-margin’
‘basscss-responsive-padding’
‘basscss-ui-utility-groups’

例えば、basscss-btn-sizesのスタイルを仕様したいとします。

package.jsonを開いて、dependencies{}の中に仕様したいスタイルを記述します。

今回の場合ですと、”basscss-btn-sizes”ですね。バージョンを指定するのですが、面倒なので、「*」で最新版を指定します。下の画像のように、flex-bojectの後に記述する場合にはカンマを忘れないでください。

  "basscss-btn-sizes": "*"

addbtnsizetopackages

こまま、npm installをすると確かに、btn-sizesはインストールされるのですが、生成されるbasscssのcssファイルにはbtn-sizesのスタイルが挿入されません。

src/basscss.cssを開いて、btn-sizesをimportします。

@import 'basscss-btn-sizes';

add_btn_sizes_style

保存したら、npm installでインストールします。

npm install

install_option_bass_style

インストールが終わるとcssフォルダが作成され、その中にbasscss.cssが作られます。

それを開くと、btn-bigやbtn-smallなど、オプションで指定したbasscss-btn-sizesスタイルが記述されています。

add_three_style

必要に応じて、importする内容を追加して仕様してください。

まとめ

必要なスタイルのみを作るのはなんだか、レシピみたいですね。

スポンサードリンク

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

-ソフトウェア
-,

執筆者:


comment

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

関連記事

Aptana Studio 3でソースコードのどこにカーソルがあっても改行する方法

概要 みなさんこんにちはcandleです。今回はAptana Studio 3の素晴らしい機能の1つを紹介します。 改行はソースコードを書く上では大変重要になります。 新しくコードを書いている時は改行 …

VirtualBoxにubuntu13.10desktop版をインストールする

概要 みなさんこんにちは、candleです。今回はVirtualBoxにubuntu13.10をインストールしてみましょう。 VirtualBoxは一般にVM(バーチャルマシーン)と言われるもので、O …

redmineのチケットのデフォルトトラッカーを変更する

概要 みなさんこんにちはcandleです。redmineのデフォルトトラッカーを変更します。 この設定はプロジェクト毎でなく、全てのプロジェクトで共通の設定になってしまうので、あまりよろしくありません …

Aptana Studio3 にemmetをインストールする

概要 みなさんこんにちはcandleです。3月は忙しくてほとんどブログを書く事ができませんでした。すみません。 4月も忙しくなりそうで、更新がぼちぼちになるかもしれませんが、よろしくお願いします。 今 …

Mac OSで使われているポート番号を確認する(portsscan)

概要 みなさんこんにちはcandleです。今回はMacで使われているポートの確認方法を紹介します。 ポート番号とはパソコンがインターネット(とは限らないのですが)、外部からのアクセスを受け付けている番 …

  • English
  • 日本語

プロフィール


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

スポンサードリンク

アーカイブ