概要
みなさんこんにちはcandleです。今回はbasscssのコアスタイルに記述されていない、スタイルの読み込みを行います。
basscssはv7あたりからnpmを使用して、スタイルを作成するようになりました。それまでは、スタイルが記述されたcssがあったのですが、今はimportのみが記述されています。
デフォルトのコアなスタイルのみを使用する方法は以下の記事を参照してください。
前提
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": "*"
こまま、npm installをすると確かに、btn-sizesはインストールされるのですが、生成されるbasscssのcssファイルにはbtn-sizesのスタイルが挿入されません。
src/basscss.cssを開いて、btn-sizesをimportします。
@import 'basscss-btn-sizes';
保存したら、npm installでインストールします。
npm install
インストールが終わるとcssフォルダが作成され、その中にbasscss.cssが作られます。
それを開くと、btn-bigやbtn-smallなど、オプションで指定したbasscss-btn-sizesスタイルが記述されています。
必要に応じて、importする内容を追加して仕様してください。
まとめ
必要なスタイルのみを作るのはなんだか、レシピみたいですね。
