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

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

関連記事

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

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

MAMP、動かない時の環境設定

概要 みなさんこんにちわcandleです。今回はMAMPで不調が起きたり動かなかったりした時の調整をしていきましょう。MAMPはapacheとphpとmysqlをあたかも仮想的に環境を作ってくれます。 …

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

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

ブルーライトカットソフト[ f.lux ]の使い方

概要 どうもみなさんコンニチはcandleです。f.luxの導入と使い方を説明します。 fluxはブルーライトカットをソフトウェアで行うものです。 ブルーライトカットにはメガネというのが代表的ですが、 …

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

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

  • English
  • 日本語

プロフィール


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

スポンサードリンク

アーカイブ