XF 2.3 Custom style property usage in template

[QuackieMackie]

I created a custom style property:

.xf-sylphian_verify_minecraft_motd()
{
    background: #1f1f1f;
    border: 1px solid #2b2b2b;
    border-radius: 6px;
    padding: 8px 10px;
    font-family: "Courier New", Courier, monospace;
    line-height: 1.3;
    font-size: 13px;
    color: #ddd;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

@xf-sylphian_verify_minecraft_motd--background-color: #1f1f1f;
@xf-sylphian_verify_minecraft_motd--border-width: 1px;
@xf-sylphian_verify_minecraft_motd--border-color: #2b2b2b;
@xf-sylphian_verify_minecraft_motd--border-radius: 6px;
@xf-sylphian_verify_minecraft_motd--padding: 8px 10px;

How do I use this in a template? I'm trying to replace my <xf:css> tag.

 

[Jeremy P]

As if it were a Less mixin:

.some-element-class
{
    .xf-sylphian_verify_minecraft_motd();
}

 

[QuackieMackie]

As if it were a Less mixin:

.some-element-class
{
    .xf-sylphian_verify_minecraft_motd();
}

In the template I'm doing this:

<xf:css>
.motd-container
{
    .xf-sylphian_verify_minecraft_motd();
}
</xf:css>

<xf:if is="$server.motd">
    <div class="contentRow-snippet motd-container">{$server.motd|raw}</div>
</xf:if>

But that doesn't seem to be working. Should I be using a separate .less template instead?

Using a separate template was what I needed to do. Then just pass that in using <xf:css src="sylphian_verify.less" />. Thank you.