そのうちWordPressのテーマを作る方法の解説とかしたいなーと思っている@It_is_Rです。
いま準備中ですので、もうちょっとお待ちくださいねー。
そして今回ですが、KSSを使ったスタイルガイドを作る方法を紹介したいと思います。
まずはじめに、node.jsをインストールしておいてください。
また、SASS(SCSS)をコンパイルできる環境を整えておいてください。
参考はこちらの記事をどうぞ。
gulpでsassをcssにコンパイル。インストール&便利な使い方。
KSSをインストールする
ではまずKSSをインストールしてみましょう。
ターミナルに次のコマンドを入力します。
sudo npm install -g kss --save-dev
これで、kssというコマンドが使えるようになります。
デモを作成する
インストールが完了したら、デモを作成してみましょう。
kss --demo
するとstyleguideというフォルダが生成され、そのフォルダの中にデモが生成されます。
SASS(SCSS)にコメントを書いてKSSスタイルガイドを作る
では、実際にスタイルガイドを作ってみましょう。
まず、SASS(SCSS)ファイルが置かれたフォルダにhomepage.mdファイルを作成します。
ディレクトリは自分のSASS(SCSS)ファイルが置かれたディレクトリに設定します。とりあえず作っておかないと警告されてしまいます。
touch style/sass/homepage.md
SASS(SCSS)ファイルを作ります。拡張子がscssのものです。私もやってみましたが、sassのものは対応していないようです。(もし違ってたらコメントで教えてください)
//Buttons // //Styleguide 1 /* square 四角形のボタン Markup: <button class="btn {{modifier_class}}">Button</button> .btn-primary - 主要ボタン .btn-safety - 安全ボタン .btn-danger - 危険ボタン Styleguide 1.1 */ /* circle 円形のボタン Markup: <button class="btn {{modifier_class}} btn-circle">Button</button> .btn-primary - 主要ボタン .btn-safety - 安全ボタン .btn-danger - 危険ボタン Styleguide 1.2 */ @import "setting/setting"; .btn, .btn > a { text-decoration: none; display: inline-block; padding: 0.3em 1.7em; border: none; color: #fff; } 〜省略〜
このファイルからスタイルガイドを作成するには、ターミナルにこのように入力します。
kss (scssのディレクトリ) (スタイルガイドを作るディレクトリ) --css (コンパイルしたcssのディレクトリ)
コンパイル後のcssのディレクトリを入力しないと、スタイルガイドにcssが反映されないようです。
実際に入力したコマンドはこちらです。
kss style/scss styleguide --css style/css/style.css
制作したスタイルガイドはこんな感じになります。