概要
みなさんこんにちは、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';
のように、完全に必要なスタイルのみをnpmでインストールして、cssを作成する方になっていました。
ということで、htmlでペラ１で使えるbasscss.cssを作成します。
bassの必要なスタイルをインストールする
basscssのzipをgithubからダウンロードしてください。「Download zip」のボタンからできます。
https://github.com/basscss/basscss
zipを解凍しておきます。
解凍したフォルダを開きます。
basscsssのインストールしたいスタイルコンポーネントはpackage.jsonに記述されています。
dependencies{}に囲われている部分です。
デフォルトで、basscssのコアなスタイルがインストールされます。
package.jsonを変更せずに以下のコマンドでインストールしましょう。
npm install
インストールが終わると、cssフォルダが作成されます。その中に、basscss.cssが作成されます。
cssフォルダのbasscss.cssに記述されているスタイルはsrc/basscss.cssで@importしているものです。
もしも、不必要なスタイルがあれば、src/basscss.cssのimportを削除して、「npm install」すれば、適応されます。
css/basscss.cssを任意のフォルダに移して使えば、問題なく使えます。
basscssのオプションのスタイルの使い方は次回解説します。
まとめ
node使いでない方からすると、basscssを自分で作成するのは一苦労します。
