joppot

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

ソフトウェア

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

投稿日:


placeholder-square

概要

みなさんこんにちは、candleです。今回はv8までバージョンが上がったbasscssの使い方です。

basscssは便利なcssフレームワークなのですが、デフォルトではすぐに使用できるcssが作成されていません。

nodeのアプリケーションでbassをしようするのは簡単ですが、
平のhtmlやphpで使用するには自分でbasscss.cssを作成する必要があります。

と思いましたが、後から考えてみると、cdnのcssをダウンロードすれば、使えますね。

https://npmcdn.com/basscss@8.0.0-beta4/css/basscss.css
圧縮版はこっち
https://npmcdn.com/basscss@8.0.0-beta4/css/basscss.min.css

この記事はnpmを使って自分でbasscssのcssを作成す方法を紹介します。

前提

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


basscssの仕様

先に記述しておきますが、私はnodeは使った事ないので、間違っているかもしれません。

basscssは昔は、basscss.cssに全てのスタイルが記述されていました。

バージョン4以降でしょうか、軽量化が計画されて、多くのスタイルはオプションという形で切り離されました。例えば、ボタンのサイズや、ボーダーの色など。

それでも、まだbasscss.cssの内部にはコアとなるスタイルがbasscss.cssに記述されていました。、簡単に使いたい場合はそれを引っ張ってくれば、phpやhtmlで使えました。

ところが先日バージョン8を見るとsrc/basscss.cssの中身が、

@import 'basscss-base-reset';
@import 'basscss-base-forms';

new_v8basscss

のように、完全に必要なスタイルのみをnpmでインストールして、cssを作成する方になっていました。

ということで、htmlでペラ1で使えるbasscss.cssを作成します。

bassの必要なスタイルをインストールする

basscssのzipをgithubからダウンロードしてください。「Download zip」のボタンからできます。

https://github.com/basscss/basscss

zipを解凍しておきます。

解凍したフォルダを開きます。

basscsssのインストールしたいスタイルコンポーネントはpackage.jsonに記述されています。
dependencies{}に囲われている部分です。

packagejsondepeddata-1

デフォルトで、basscssのコアなスタイルがインストールされます。
package.jsonを変更せずに以下のコマンドでインストールしましょう。

npm install

npmok_install_go

インストールが終わると、cssフォルダが作成されます。その中に、basscss.cssが作成されます。

basscss_base_style_maked

cssフォルダのbasscss.cssに記述されているスタイルはsrc/basscss.cssで@importしているものです。

もしも、不必要なスタイルがあれば、src/basscss.cssのimportを削除して、「npm install」すれば、適応されます。

css/basscss.cssを任意のフォルダに移して使えば、問題なく使えます。

basscssのオプションのスタイルの使い方は次回解説します。

まとめ

node使いでない方からすると、basscssを自分で作成するのは一苦労します。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-ソフトウェア
-,

執筆者:


comment

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

関連記事

ungoogled chromiumにextensionを追加する方法

English 日本語 概要 みなさんこんにちはcandleです。 僕はfirefox派なので、あまりChromeは使わ無いのですが、時にはextensionの関係でChromeを使うことがあります。 …

centos6.5にemacs24.5をrpmからインストールする

概要 みなさんこんにちはcandleです。今回はcentos6.5にemacs24をrpmからインストールします。 前提 適当なcentos6.5の環境がある。私はvagrantにします。

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

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

wordpress gutenbergはmarkdown書けるよという話

概要 みなさんこんにちはcandleです。今回は最近メジャーバージョンアップグレードがあったwordpressのgutebergでmarkdownがかけるよという話をします。 主題の通りなのですが、こ …

emacsのReactの開発をrjsx-modeで行う

English 日本語 概要 みなさんこんにちはcandleです。 今回はemacsのreact開発用のメージャーモードのrjsx-modeを導入してみたいと思います。 Reactの開発はこれまで、w …

  • English
  • 日本語

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