Syntax

.ucss’s syntax is oriented from css.
If you can write css code already, you may skip beginning of this section.

Basic Structure

// VALUE DEFINITIONS
@foo: 1234;
@bar: #FF0000FF;

// STYLE DEFINITIONS
sel1 #sel2 .sel3 {
    outline: 1;
    color: black;
}

.ucss file is consist of VALUEs and STYLEs.

You must append semicolon(;) every end of syntax.

Value

Every value starts with @. This makes distictions with other KEYWORDs and IDs.

@NAME: 1234;

Type

COLOR

@color_by_hex: #FF0000FF;
@without_opacity: #FF0000;

@color_by_name: red;

NUMBER

@integer: 1234;
@float: 123.44;

KEYWORD

@outline: none;

STRING

@path: "asdf";

Style

SELECTOR1 SELECTOR2 {
    PROPERTY-KEY: PROPERTY-VALUE;
}

STYLE is a set of properties which describes specified object styles.

First, you need to specify the object to which you want to apply the style. You can select single or multiple objects with SELECTOR. SELECTORs in uss is very simillar to css’s. Here’s some rules how to specify objects in uss.

Component selector

Image {

}

Name selector

#DateOfMonth {

}

Class selector

.bold {

}

Special selectors

* { 
}

Descendant

Button > Text {

}

State specifier

Button:hover {

}

Bundle

Bundle is kind of value which is set of properties.
With this syntax, you can simplify the code with many duplicates.

@h1 {
    font-size: 40;
    font-style: bold;
}

The example below shows how to import bundle to style.

.title {
    @h1;
}
// above code is exactly same with below.
.title {
    font-size: 40;
    font-style: bold;
}

You can also import bundle to bundle:

@foo {
    font-size: 40;
}
@bar {
    font-style: bold;
}
@foo_bar {
    @foo; @bar;
}

.title {
    @foo_bar;
}