このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2017.06.18

CSS ファイル簡単生成。APBCSS ファイルジェネレーターツール「APB CLI」の使い方。

どもです。

皆さん 日々、CSSを記述されているでしょうか?

その際、どのアーキテクチャで構築されているでしょうか。

当方は、ゲームパーツを大量に制作するのもあって、やはり「APBCSS」のアーキテクチャが重宝しております。

という事で、「APBCSS」の推奨するファイルをコマンド1発で生成出来るジェネレートツール、

「apb-cli」の使い方となります。

 

APB CLI インストール

npm

https://www.npmjs.com/package/@atomic-package/apb-cli

github

https://github.com/atomic-package/apb-cli

 

インストールは、npmコマンド でグローバルにインストールする。

$ npm install -g @atomic-package/apb-cli

 

これで、インストール完了。

apbコマンドが使用できます。

 

Newコマンド

apb Newコマンドで、SCSSディレクトリの生成を行うことができます。

以下の様に入力すると、

$ apb new

以下の様に、ドカーっとSCSSファイルが生成されます。

 

ディレクトリ名を指定して生成したい場合は、以下の様に入力すれば、指定することが可能となっております。

$ apb new ディレクトリ名

上記は 「apb new webcyou」と入力してみました。

また、ショートハンドで、入力することも可能。

$ apb -n

 

パス指定

生成するパスの指定も行えます。

パスの指定は「–path=””」で指定することが出来ます。

$ apb -n --path="../"

上記のコマンドだと、一つ上の階層に生成することになります。

ホームディレクトリに「webcyou」というフォルダ名に生成したければ、以下の様に入力。

 

$ apb -n webcyou --path="~"

 

Generateコマンド

個別に生成したい場合は、「Generateコマンド」を使用すると良いです。

$ apb generate base

で、「Base 」Styleに関するファイルが生成されます。

また、APBCSS の特徴の「parts」に関するscssファイルを生成したい場合は以下のコマンドで生成できます。

 

$ apb generate parts

 

また、こちらのショートハンドは、「-g」となりますので、

$ apb -g parts

こちらでも、「parts」に関するscssファイルを生成することが可能となっております。

 

新規で、webアプリ、webページ作成の際に、ササッと 準備することができるので、

APBCSS を用いる際は重宝しそうですね!

 

APBCSS

http://apbcss.com/

 

ではではぁ。

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。