そのうち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
制作したスタイルガイドはこんな感じになります。
