くまだどうも、くまだです。
EJSで、コンポーネント（パーツ）を作って変数設定して、セクションや場所ごとに変数の中身を書き換える。
コンポーネントを作って変数設定
例えば、ラベルのパーツをcomponentsフォルダの中に_c-label.ejsファイルに作成します。
〇 _c-label.ejs
<span class="c-label <%= className %>"><%- title %></span>そのラベルパーツには、クラス名とラベルのテキスト部分に変数を設定します。（<%= 変数 %>や<%-変数 %>の部分）
実際に使用するときは、例えばindex.ejsファイルに以下のように記述。
〇 index.ejs
<%- include('./components/_c-label.ejs', { className: "", title:"ラベル" }); %>
これをbuildすると、以下のようにHTMLで出力されます。
<span class="c-label ">ラベル</span>クラス名追加したい場合は、classNameの部分に任意のクラスを付与。
<%- include('./components/_c-label.ejs', { className: "c-label--bgGray", title:"ラベル" }); %>
<%- include('./components/_c-label.ejs', { className: "c-label--bgGreen", title:"ラベル" }); %>
これをbuildすると、以下のようにHTML出力されます。
<span class="c-label c-label--bgGray">ラベル</span>
<span class="c-label c-label--bgGreen">ラベル</span>
上記みたいな感じで使えるので、例えばセクションごとにパーツ周りの余白が異なる場合でも、それぞれのセクションのクラス名を付与して、そのクラスに対して余白を当てる、などして対応できます。
パーツの使いまわしを考慮して、c-labelには余白を当てません。
<%- include('./components/_c-label.ejs', { className: "p-about__label", title:"ラベル" }); %>
<%- include('./components/_c-label.ejs', { className: "p-news__label", title:"ラベル" }); %>
.p-about__label {
margin-top: 40px;
}
p-news__label {
margin-top:10px;
}buildすると以下のように出力され、それぞれに付与したクラスによって異なるCSSを適用できます。
<span class="c-label p-about__label">ラベル</span>
<span class="c-label p-news__label">ラベル</span>ここまで読んでくださりありがとうございました。