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

スポンサードリンク

関連コンテンツ

オススメ記事

画像を動かすよ!

JavaScriptで画像を移動してみよう! 小学生からのプログラミング入門

みなさんこんにちは。今回も、プログラミングの勉強《べんきょう》をはじめていきましょう! 前回、「JavaScriptで画像を表示してみよう! 小学生からのプログラミング入門」では、JavaSc

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ブログ全体の幅を変更。

現実社会では殆ど言葉を発しない@It_is_Rです。だって、厄介なことになりたくないじゃん。 今回も前回に引き続き、FC2ブログカスタマイズの記事です。前回、ヘッダーのサイズを変更しましたが、ブ

java

Javaのクラスとメソッドの違いとは?ゲーム風に解説。

この頃小説を読んでいなく、何か読みたいなと思っている@It_is_Rです。 Javaを勉強し始めたばかりの人は、何やら難しい単語に混乱する人も多いでしょう。その中で、クラスとメソッドって一体何が

プログラミングのクラスってなぁに?

【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、今回もはじめていきましょう! 前回はマップ上をキャラクターが自由に動くことができるようにしました。 今回はES6から使われるようになった「クラス

キー入力で文字を切り替えるべ

【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門

小学生からのJavaScript講座です。 前回、文字を一文字づつ表示させる方法と改行の方法を紹介しました。今回はこのプログラムに、キー入力によって文字を切り替えられる機能をつけてみましょう。

【Bootstrap 4】パンくずリスト(Breadcrumb)を作ってみよう!

Bootstrap4の使い方、第4回目となりました。 サイトを作っていると必然的に必要になるのがパンくずリストです。 パンくずリストは、サイト訪問者が今どのページにいるのかということを分かりやすく示

java

【Java】スーパクラス、サブクラスとは?継承について。

猿も木から落ちますが、Rは木から落ちません。だって登らないから。 @It_is_R です。いや、登ろうと思っても登れません。 Javaを使っていると継承という言葉をよく耳にしますよね。どういうも

scratch

Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門

さて、プログラミングの勉強をはじめていきましょう! 前回の「Scratchでじゃんけんゲームを作ろう!」では、じゃんけんゲームの作り方を学びました。今回は、もうちょっと本格的(ほんかくてき)な

【Unity】Addressableを使って画像をスクリプトから表示する方法

こんにちは。私が執筆した小説「ELENA 人魚と過ごした時間」をベースとしたノベルゲームを現在Unityにて開発中です。まだまだ、時間はかかりそうですが、完成したときはよろしくお願いいたします。

【初心者向けJavaScrip入門】変数を使いこなすための、かなり詳しい解説

変数は、数値や文字列などのデータを入れておける箱です。プログラミングをはじめて、最初のほうで覚えるものですが、変数は意外と奥が深いものです。 そこで今回は、JavaScriptにおける変数の使

コメントを残す(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。