joppot

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

ソフトウェア

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

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

Pocket

bass_css_option_style_top_thumb

概要

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

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

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

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

前提

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

SPONSORED LINK


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

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

関連記事

wordpress4.4の画像にsrcsetが埋め込まれるのを削除する

概要 みなさんこんにちはcandleです。今回はwordpress4.4で追加された、retinaやレスポンシブに対応した画像のsrcsetの削除の仕方を紹介します。 wordpressの画像はeww …

iphoneの画面の明るさを簡単に調整するたった1つの方法

概要 みなさんこんにちはcandleです。iphone画面の画面の明るさを簡単に調整する方法を紹介します。 実はこの機能に気づくまでは、毎回「設定」から「画面表示と明るさ」で調整していました。 前提 …

emacsのバージョンを確認する

概要 emacsのバージョンを簡単に確認しましょう。 記事にするほどものではありませんが、備忘録にまとめておきます。 emacsのメジャーなバージョンは22と23に大きく分かれており、最近では24もリ …

let’s encryptのssl証明書をvagrantのubuntuを使用して取得する

概要 みなさんこんにちはcandleです。2014年の後期にmozillaあたりが主導して、無料のssl証明書作ろうという動きがありました。ついに去年の12月にβ版がでたので、早速試してみました。 ち …

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

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

  • English
  • 日本語

プロフィール


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

スポンサードリンク

アーカイブ