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

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

関連記事

redmineにclose button pluginを入れて終了したチケットをボタン1つで閉じる

概要 みなさんこんにちはcandleです。今回はとても便利なチケットを終了させるボタンを、表示できるプラグンの導入の仕方を紹介します。 チケットは一般に以下のコマンドのみチケット詳細で表示されています …

Atomのatom-import-jsプラグインを使ってReact componentを自動的にインポートする

概要 みなさんこんにちはcandleです。 今回はAtomとimport-jsを使って自動的に、componentのパスをインポートしてみたいと思います。 Reactは1ファイル1コンポーネントの書き …

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

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

middlemanでlivereloadを使用する

概要 みなさんこんにちはcandleです。今回はmiddlemanでlivereloadを使ってみたいと思います。 livereloadとはhtml、css、jsなどを書いて保存したタイミングでブラウ …

Macのログインフックを利用して自動でlo0のipアドレスを割り振る

概要 みなさんこんにちはcandleです。 今回はMacのログインフックを使って、自動的にローカルのipアドレスを割り振ってみたいと思います。 Macでは自動的に127.0.0.1がローカルのIPアド …

  • English
  • 日本語

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