HTML / SASSジェネレーター（自動生成ツール）の使い方
目次
まずはアクセスしてみてください！
使い方はとても簡単。
Step.1 ページ名を入力
ページ名を入力します。
例えばトップページなら、「home」や「top」
お知らせページなら「news」のように入力してください。
Step.2 セクション名を入力
例えばトップページの概要欄なら「about」と入力
Step1で入力したページ名とセクション名で
→ 結果「homeAbout」というClass名になります
Step.3 タグと内容を入力
あとはセクション内で使うHTMLを選択するだけです！
生成したコードをエディタに貼り付け、編集してください。
こんな使い方もできます
HTMLボックスにご自身のコード貼り付け、任意のSASSモードを選択するとSASSを生成できます。
セレクタを記入する作業が省けるので実用性◎です。
機能について
現時点ではキャメルケースの命名規則とBEMの命名規則を生成できます
チェックを選択するだけで好みのタイプのコードを生成できます。
SASSは３つのモードがあります。
① 当ブログで紹介するMixinを含めたSASSの生成モード
② 当ブログで紹介するMixinを含めず、各セレクターに頻出すると思われるプロパティを割り当てた生成モード
③ セレクタだけのモード
ツールを作るにあたって考慮した事、アイディア、思想等
直感的に使えるようにしたい
これまでもいろんなサイトであったコード生成ツールですが、
機能を盛り込みすぎたり、見た目が複雑でわかりづらく実用的なものが
ありませんでした。
■ 考えられる一番シンプルな方法
■ ミニマルな単位
■ 考えずに使える
これらを考慮し設計してみました。
→ 生成するコードの範囲もページ全体ではなく、
セクション（大まかなブロック）ごとに生成できるようにしました。
合理的なレイアウトと操作
入力しながら
画面右側では生成結果を見られるようにしました。
最初は、レイアウトも縦で「コードを生成する」というボタンを押さないと生成されない仕様でしたが
入力するたびに最新の生成コードが見られる様になりました。
生成されるコードはミニマルで汎用的なもの
昨今あるコード生成ツールでは、
見た目はカンプと同じだけど、
レイアウトがほとんど position:absolute; で無理やりその場所に持っていっていたり、
いらないコードが残っていたり、
クラス名や構造が複雑で保守性がなかったりと、
納品するには少し無理のあるものが多いです。
このツールでは、
「コーディングのルーティーンワークを減らす」
ことが最大の目的なので、
ほとんどのセクションにある大まかな構造、
セレクタに頻出するプロパティだったりを自動で生成できるようになっています。
使わなければ、⌘delで消せばいいだけなので保守性を損なうこともありません。
まとめ
まだまだアップデート途中なので、
ご意見などあればぜひ教えて下さい。
（コメント欄作る予定ですが、当分はお問い合わせやインスタのDMからでも！）
