@if

Syntax

(event selector:event) {
    (...)
    @if expr {
        (...)
        (target selector) {
            (...)
            @if expr {
                (action commands)
            } @else if expr {
                (action commands)
            } @else {
                (action commands)
            }
            (...)
        }
        (...)
    } @else if expr {
        (action commands)
    } @else {
        (action commands)
    }
    (...)
}

expr (expression) = This can include JavaScript syntax, ACSS conditionals or a mixture of both. See the examples below for possible syntax choice and to see how ACSS conditionals and JavaScript can be used together. The expression should result in boolean "true". Raw JavaScript is allowed, but "anonymous" functions are not allowed in the expression.

The @if statement can wrap around target selectors and action commands, and these can be nested within other @if statements. Content placed within the @if statement will only run if the expression passes.

You can have multiple @else if statements. There can only currently be one @else statement, to follow conventions from other languages. Note that in the future this may get expanded to include allow multiple @else statements that themselves contain expressions if certain proposals to CSS get adopted to allow multiple @else statements on other appropriate @ type statements. It is not a big deal to add it to ACSS later on if the CSS spec writers end up going that route.

You don't have to put the whole expression (expr) in parenthesis,  "(" and ")", although you can if you want to.

If it makes sense to use a CSS conditional in the event selector, like "if-var", rather than using an @if, then do that. However, if you find that you are using a lot of special conditionals in the events and the events themselves are getting hard to read, it is definitely worth using @if statements instead in order to make things easier to manage.

Using ACSS conditionals with @if

When using ACSS conditionals in an @if statement, You do not have to put the "if-" that you would normally use when using ACSS conditionals on event selectors. You can do, but it isn't needed. This was done to save you some typing, and it also makes the syntax easier to read. This is only a feature for @if and @while statements.

For example, if you want to use the conditional "if-inner-html(...)" with an @if statement, just type "inner-html(...)".

For negative conditionals, like not-if-inner-html(...), it becomes "not-inner-html(...)" or "!inner-html(...)" when used with @if.

 

@if - basic use

@if - pause visual test