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

スポンサードリンク

関連コンテンツ

オススメ記事

【Android Studio】開発したアプリの実機テストを行う方法。

どうも、頭がすっからかんの@It_is_Rです。 やかましいわ。 今回は Android Studio で実機テストする方法を紹介します。 これからアプリ開発をしていく上で必要不可欠な実機テ

リセットCSS は何を使う? まとめ8選と2019年版ランキング

Web開発でブラウザごとの表示の違いをリセットしてくれる リセットCSS というものがあります。 しかし、何を使っていいのかと感じている人もいると思います。 今回はこの リセットCSS につい

FC2でブログを始めよう!誰でも簡単にできるブログの作り方

FC2ブログは、FC2が運営する無料でブログを開設できるサービスです。(有料版もあります) また、FC2のサービスには、動画、ライブ配信、アフィリエイト、小説など、様々なものがあります。 今回

WordPress

WordPressカスタマイズ。テンプレートのファイル構成をチェック。

二兎を追う者は一兎をも得ず。でも、三兎を追えばそのうちの一兎ぐらい得られるんじゃ無いかと思い、その努力の割に何も得られないのが@It_is_Rです。やかましいわ。 今回の記事は初のWordPre

java

Eclipseによる、Javaでじゃんけんゲームプログラムの作り方

※追記(2018/8/29) より分かりやすい記事になるよう修正しました。 今回はJavaを使って、じゃんけんゲームを作る方法を紹介します。 eclipseがインストールされ

カスタムロゴの使い方。 WordPress サイトのタイトルを画像に変更!

笑いたい時に笑えず、笑っちゃいけない時に笑えてくる@It_is_Rです。 今回はカスタムロゴの使い方を紹介したいと思います。 このシリーズの前回の記事はこちらです。 【 WordPres

【 WordPress 】functions.php で色んな機能を使ってみよう!【基本】

馬鹿は風邪を引かないといいますが、どうやら引いたようです。@It_is_Rです。 ちなみに、「馬鹿は風邪を引かない」ということわざは、「馬鹿は風邪を引いても気がつかない」という例えだって知ってました

wordpress

【WordPress】パンくずリストをプラグイン無しで自作する方法

※追記(2018/2/12) もっと高機能になるように、改良修正しました。 人生で3回ほど死にそうになったことがある@It_is_Rです。 WordPressのパンくずリストを作

WordMove | 運用中の WordPress 環境をローカルと FTP で同期

道が覚えられない、@It_is_Rです。 人生さえ彷徨い続けてここにいます。 さて、運用中の WordPress サイトの環境を、ローカル開発環境と同期したい時、 WordMove を使うとと

WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法!

愛と勇気だけが友達の@It_is_Rです。 今回はPugでWordPressテーマを作る方法を少し紹介します。 詳しいテーマの作り方はこちらをご覧ください。 WordPressのテーマを自作

コメントをどうぞ!

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