joppot

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

ソフトウェア

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

投稿日:

Pocket

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がインストールされている。

SPONSORED LINK


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

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

関連記事

iphoneのsafariでfacebookのmessanger(メッセージ機能)を使う方法

概要 みなさんこんにちはcandledです。 今回はfacebookのmessangerアプリを使わずにsafari上でfacebookのメッセージをする方法を紹介します。 前提 iphoneのsaf …

AtomのMarkdownでプレビューがトップにスクロールして戻ってしまうのを防ぐ方法

English 日本語 概要 みなさんこんちにcandleです。今回はAtomのMarkdownで記述中のプレビューがスクロールアップしてしまうのを防ぐ方法です。 Atomには初めからmarkdown …

emmetを使ってhtml5のテンプレート入力補完する

概要 みなさんこんにちはcandleです。今回はemmetを使ったhtml5テンプレートの入力補完を試してみましょう。html5が使われだしてから、だいぶ経ちました。私も今ではhtml5で全てのhtm …

basscssのオプションで切り離されたスタイルをnpmでインストールする

概要 みなさんこんにちはcandleです。今回はbasscssのコアスタイルに記述されていない、スタイルの読み込みを行います。 basscssはv7あたりからnpmを使用して、スタイルを作成するように …

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

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

  • English
  • 日本語

プロフィール


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

スポンサードリンク

アーカイブ