1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. CSS
  6. »
  7. KSSでスタイルガイドを作る方法。インストールと使い方。

KSSでスタイルガイドを作る方法。インストールと使い方。

そのうちWordPressのテーマを作る方法の解説とかしたいなーと思っている@It_is_Rです。
いま準備中ですので、もうちょっとお待ちくださいねー。

そして今回ですが、KSSを使ったスタイルガイドを作る方法を紹介したいと思います。

まずはじめに、node.jsをインストールしておいてください。
また、SASS(SCSS)をコンパイルできる環境を整えておいてください。
参考はこちらの記事をどうぞ。

gulpでsassをcssにコンパイル。インストール&便利な使い方。

目次
  1. KSSをインストールする
  2. デモを作成する
  3. SASS(SCSS)にコメントを書いてKSSスタイルガイドを作る

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

制作したスタイルガイドはこんな感じになります。
KSS

スポンサードリンク

関連コンテンツ

オススメ記事

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。文字の大きさを設定する。

こんにちわ。美しいものほど濁って見える@It_is_Rです。 今回もFC2ブログの最強カスタマイズを始めていこうと思います。 今回は文字の大きさや色など、ブログ内の文字の設定をしていきます。初

Scratchで じゃんけんゲームを作ろう!

Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門

こんにちは! 今日(きょう)もプログラミングのお勉強(べんきょう)をはじめていきますよ! 前回の「Scratchの使い方と、ゲーム作りの基礎知識を学ぼう!」では、Scratch(スクラッチ)っ

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。【準備編】

いつもどうもです。@It_is_Rです。 少し前まで、私は FC2ブログ を使っていました。 やはり個性を大切にしたい私にとって、用意されたテンプレートを使うことに抵抗がありました。 「

Android StudioをMacにインストールする方法

Android Studioを使って、Androidアプリ開発を行っていきましょう! 今回は Android Studioをインストールする手順を解説します。 Android Studio

迷路やRPGで使えるマップを作ってみよ!

【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、今回もはじめていきましょう! 前回はHTML5とCanvasを使って、キャラクターがキーボードの入力《にゅうりょく》で移動《いどう》するところまで、紹

マップ上をキャラが移動できるようにしよう!

【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、今回もはじめていきましょう! 前回は、JavaScriptでのマップの作り方を紹介《しょうかい》しました。しかし、まだマップを配置《はいち》しただけで

npm-scriptsの使い方。自作のコマンドによるタスク実行方法

畳んだ布団が飼い猫のお気に入りの場所になってます。@It_is_Rです。 npm-scriptsを使うことで、あらかじめタスクをかんたんな名前で指定しておき、そのタスクを素早く実行できるように

今月の残り日数を計算するべ!

JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門

さて、小学生からのJavaScript《ジャバスクリプト》入門、第2回目のはじまりです。今回は、JavaScriptでの演算(えんざん)の方法を学び、今月の残《のこ》り日数を計算してみましょう。

fish shell

Fish shellの使い方。プラグインなしでもここまで可愛くできる!

先日、Macをフォーマットしたため、今まで構築したきた開発環境が消えました。 といっても、バックアップはとってあるので戻すことはできるのですが、せっかく綺麗に全部消えたので、もう一度作り直そうかな、

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。 CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。 パ

コメントをどうぞ!(コメントは承認後に反映されます)

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