Directives

Sugar provides familiar control structures and attribute helpers as HTML attributes.

TIP

Directives are just attributes prefixed with s:. They keep templates readable while compiling to fast PHP.

Directive Types

Type	What it does	Examples
Control Flow	Wraps elements in conditions or loops.	s:if, s:foreach, s:switch, s:try
Attribute	Computes or merges attributes.	s:class, s:spread, s:tag
Content	Replaces element content with output.	s:text, s:html
Pass-through	Handled by other passes.	s:slot, s:bind, s:raw

Control flow

<div s:if="$isReady">Ready</div>

Attribute

<div s:class="['active' => $isActive]"></div>

Content

<div s:text="$userName"></div>

Pass-through

<s-card s:bind="$cardProps">
	<div s:slot="header">Title</div>
</s-card>

Raw block

<div s:raw>
	{{ this-is-left-untouched }}
	<s-template s:if="$nope">Not parsed</s-template>
</div>

Details

Jump to the full pages

• Control Flow Directives
• Attribute Directives
• Content Directives
• Pass-through Directives

Special Elements

• <s-template> - Fragment element that renders only children and carries directives without adding HTML.

Use it as a wrapper when you need directives or scoping without introducing a real DOM node. It is also used for template inheritance and includes.

<s-template s:if="$show">
	<h2>Only this output renders</h2>
</s-template>

For related examples, see:

• Template Inheritance
• Control Flow Directives