joppot

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

ソフトウェア

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

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


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

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

関連記事

Macのitermでスクロールバックを増やしたり無制限にする設定

概要 みなさんこんにちはcandleです。今回はitermのスクロールバックの制限を増やしたり、無制限にする方法を紹介します。 itermのスクロールバックできる量はデフォルトで確か、2000行だと思 …

Xcode5にCommand Line Tools(コマンドラインツール)をインストールする

概要 Xcodeを使ってみようと思っているcandleです。 特にOpenCVを使用したいので、Command Line Tools(コマンドラインツール)をインストールするわけですが、どうやら、ちょ …

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

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

Atomにreact+es6対応したeslintの環境を構築する

概要 みなさんこんにちはcandleです。 今回はAtom + eslintの導入をしてみましょう。 以前書いたemacsより圧倒的に環境作りが簡単です。 近年はeslintが主流になってきて、Ato …

redmineにLocal Avatars pluginを入れてユーザーのアバターを表示する

概要 みなさんこんにちはcandleです。今回はredmineのユーザーのアバターを表示します。 githubに慣れていると何かしらユーザーの横に画像がないと落ち着かない時があります。 私はredmi …

  • English
  • 日本語

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