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

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

関連記事

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

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

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

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

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

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

middlemanでlivereloadを使用する

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

MacにPlantUML環境をbrewを使って構築する

概要 みなさんこんにちはcandleです。 今回はUMLを簡単に作成できるplantUMLの環境をMacに構築したいと思います。 私はUML作成ツールはこれまで、starUMLを使っていましたが、どう …

  • English
  • 日本語

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