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

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

そのうち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

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

スポンサードリンク

関連コンテンツ

オススメ記事

WordPress テーマ自作 | functions.php から CSS を読み込む方法。

ふぁ……ふぁ……、ファンクションッ!! あ、どうも@It_is_Rです。 なに笑ってるんですか? WordPress テーマ自作シリーズ第10回目です。 今回は、 functions.php

enchant.js

ゲームに背景画像を表示する方法!( enchant.js )

こんばんわ、@It_is_Rです。 ゴールデンウィークいかがお過ごしでしょうか。 今回は、 enchant.js を使った横スクロールアクションゲームの背景を表示してみようと思います。 空と

SCSS vs SASS どっちが便利か違いを比較。おまいら SASS 使えよ!

CSS を書くときに、 Sass はもう手放せません。 @It_is_R です。 さて、今回のテーマとなる Sass の表記には、2種類ありますよね。 SCSS と、 SASS です。

Swift

【Xcode7】Swift2でMacアプリ開発。画像を読み込む為のボタンを作る。

犬も歩けば棒にあたる。だからRは歩かない。@It_is_Rです。 最近はSwiftの記事が多いと思っている人もいるのでは無いでしょうか。実はRは現在、Swiftを使ってゲーム開発のお助けアプリを

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

普段から猫に遊ばれている@It_is_Rです。 今回は JavaScript について、初心者の人にも分かりやすく、丁寧に解説していきます。 JavaScript と EcmaSc

VCCW

VCCW で、超簡単に WordPress のローカル開発環境を整える方法。

考えすぎて間違った方向へ進む、@It_is_Rです。 WordPress のローカル開発環境を作りたい時、 VCCW を使うと便利です。 今回は、 その方法を紹介します。 VCC

キャラを決まった間隔ずつ動かすよ!

小学生からのJavaScript入門。キャラを決まった間隔ずつ動かす!

小学生からのプログラミング入門講座(にゅうもんこうざ)、第8弾です。 前回は、キャラクターの画像(がぞう)をスムーズに動かす方法でしたが、スピードが速すぎたので、画像の移動間隔(かんかく)を短く

zsh

zsh のインストール方法と、うまく起動しない時の対処法。

かっこいいものが大好きな@It_is_Rです。 そこで今回は、ターミナルをかっこよくする為の方法を、何回かの記事に分けて書いてみたいと思います。 今回、第一回目は zsh ( Z Shell

【初心者向け】webpack 4入門。一番簡単で詳しい使い方

風邪をひいてぼんやりしている@It_is_Rです。どちらにしろいつもぼんやりしてますが。 さて、今回はWebpack4について紹介していきたいと思います。 この記事では、jsファイルをビルドす

zplug を使ってプラグインをインストール、管理する。

二つのことを同時にできない、@It_is_Rです。 今回はターミナルをかっこよくするシリーズ、第三回目です。 zplug を使って、プラグインをインストールする方法を紹介します。

コメントをどうぞ!

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