Styling Panels: SCSS, Inline Styles, and Code-Based Styling

s&box panels can be styled using SCSS stylesheets, inline styles, style blocks, or direct code manipulation. The styling system uses CSS-like syntax but is rendered natively (not via a browser engine).

Automatic Stylesheet Loading

Name your stylesheet to match your Razor file and it auto-loads:

Health.razor
Health.razor.scss  ← automatically included

Or specify a custom path:

[StyleSheet( "main.scss" )]

Import other stylesheets within SCSS:

@import "buttons.scss";

Inline Styles

Style elements directly with C# injection:

<label style="color: red">DANGER!</label>
<div class="progress-bar">
    <div class="fill" style="width: @(Progress * 100f)%"></div>
</div>

Style Blocks

Add a <style> block in your Razor file:

<style>
    MyPanel {
        width: 100%;
        height: 100%;
    }
    .hp { color: red; }
    .armor { color: blue; }
</style>

Styling in Code

Modify Panel.Style directly for dynamic values:

myPanel.Style.Width = Length.Percent( Progress * 100f );

Access via Tick() or OnUpdate() for frame-by-frame updates.

Best Practices

• Use SCSS files for organization and reusability
• Use inline styles only for truly dynamic values (progress bars, positions)
• Style blocks are useful for self-contained panels that don't need external stylesheets
• The auto-naming convention (Component.razor.scss) keeps styles co-located with their panels