/Wiki/sources/honojs__hono/2026/https-hono-dev-llms-full-txt-extending-e8d4d36a3f5c-extending-s0696-c0000.md
Extending - hono-docs
Extending Source evidence: /Sources/raw/honojs hono/honojs hono.md Canonical citation: https://hono.dev/llms full.txt extending Summary You can extend the CS...
Extending
Source evidence: /Sources/raw/honojshono/honojshono.md Canonical citation: https://hono.dev/llms-full.txt#extending
Summary
You can extend the CSS definition by embedding the class name. ``tsx const baseClass = css color: white; background-color: blue; const header1Class = css ${baseClass} font-size: 3rem; const header2Class = css ${baseClass} font-si...
Content
You can extend the CSS definition by embedding the class name.
const baseClass = css`
color: white;
background-color: blue;
`
const header1Class = css`
${baseClass}
font-size: 3rem;
`
const header2Class = css`
${baseClass}
font-size: 2rem;
`In addition, the syntax of ${baseClass} {} enables nesting classes.
const headerClass = css`
color: white;
background-color: blue;
`
const containerClass = css`
${headerClass} {
h1 {
font-size: 3rem;
}
}
`
return c.render(
<div class={containerClass}>
<header class={headerClass}>
<h1>Hello!</h1>
</header>
</div>
)
Kinic Wiki