Skip to content
Evert van Brussel edited this page Jun 13, 2015 · 9 revisions

Syntax

Here's a summary of the syntax of Slade. This syntax can still change, because I'm not quite sure yet if this is the best and easiest syntax I can think of.

Tags

If you want to let Slade generate an html tag, simple write the name of the tag lower cased. So if index.slade.php looks like this:

div

Then it will compile to:

<div></div>

Slade actually assumes that any line beginning with a lower-cased word, represents an html tag. So you could use that to also generate custom elements like so:

my-component

Which translates to

<my-component></my-component>

And Slade is also aware of self-closing tags of course, so meta converts to <meta />.
Now I assume you might also want to add an id, some classes, other attributes and some inner text, don't you? That's easy:

div#main.container.well layout="vertical" This is my content

Will translate to:

<div id="main" class="container well" layout="vertical">This is my content</div>

By the way, if you start a tag with an id, or a class, instead of a tag-name then Slade will assume you want to use a div.
If you want to nest tags then that is done by indentation. In fact, all of Slade works like that. There are no ways to open or close blocks other than to use indentation.

#container
  h1 My first article

  p Here's my body text

Turns into

<div id="container">
  <h1>My first article</h1>

  <p>Here's my body text</p>
</div>

Variables

Variables can be put in many places in many different ways. Say you want to use a variable for an attribute of an html tag, you can do it like this:

meta author=$username

If the view was passed data that looks like ['username' => 'Evert'] then the html would be:

<meta author="Evert">

If you want to insert variables as the text content of a tag, you can do it like this:

h1 = $article->title

p == $article->body
<h1>Nuts &amp; Bolts</h1>

<p>My <strong>very important</strong> opinion</p>

Notice how the title was encoded with html-entities (because it was prefixed with only 1 = sign) and the body was inserted unencoded (because it was prefixed with 2 = signs).

Finally, you can also execute functions this way.

= str_repeat($user->signature, 5)

Text

One can insert a block of text by using a pipe.

| You can use a pipe
| On every new line.

| Or you can only
  use one single pipe
  as long as you indent
  the text, like I'm doing here.

If you want to insert variables in that block of text, you have several options:

| Hello $name, I heard you like {$animals[0]} and ${animals[1]}

Conditionals

If you want a certain block of content to appear or not appear depending on the content of a variable, you can use a question-mark or an exclamation-mark. The exclamation mark is an inverted conditional.

? $messages
  p You have messages.

! $messages
  p You have no messages.

You can also use more complicated conditional statements like so:

? !$var || ($number < 6 && $role == 'administrator')

Which is equivalent to:

if ( !$var || ($number < 6 && $role == 'administrator') ):

or

! $var && ($number > 5 || $role != 'administrator')

Which is equivalent to:

if ( ! ( $var && ($number > 5 || $role != 'administrator') ) ):

Foreach

If you want a certain block to be repeated for every item in an iterable, then you can do this:

ul
  > $people
    li = $person->name

Slade automatically converts the variable name from plural to singular. If it doesn't know a singular version of the word, it will use the variable $item.

ul
  > $rain
    li = $item->size

You can also choose your own variable name, like so:

ul
  > $rain > $droplet
    li = $droplet->size

To be continued...

Clone this wiki locally