Properties & Values

Every valid class in AliasCSS terminates at an unambiguous Property-Value Anchor. Because the compiler operates strictly Right-to-Left, the rightmost segment must resolve to a valid CSS declaration. Everything to the left acts as a conditional modifier or selector.


[Scopes / At-Rules]  +  [Selectors / States]  +  [Property-Value Anchor]
                                                 └─────────┬───────────┘
                                                  Core CSS Declaration

1. Syntax Anatomy

AliasCSS maps directly to native CSS properties and values using a single hyphen (-) as the primary separator:


┌──────────────────────┬──────────────────────┐
│  CSS Declaration     │  AliasCSS Syntax     │
├──────────────────────┼──────────────────────┤
│ display: flex;       │ display-flex (df)    │
│ width: 100%;         │ width-100% (w-100%)  │
│ border-radius: 12px; │ border-radius-12px   │
│ opacity: 0.8;        │ opacity-0.8 (op-0.8) │
└──────────────────────┴──────────────────────┘

Both full semantic names and canonical shorthand abbreviations are supported. Both emit identical, deduplicated CSS rules.

2. Numbers, Units & Decimals

AliasCSS handles all standard CSS units (px, rem, em, %, vh, vw, deg, ms, s, ch, fr).

A. Positive vs. Negative Values (`--`)

A single hyphen (-) acts as the property-value delimiter. A double hyphen (--) designates negative values:


<!-- Positive Margin -->
<div class="margin-top-16px">mt: 16px</div>
 
<!-- Negative Margin & Coordinate Offsets -->
<div class="margin-top--16px">mt: -16px</div>
<div class="top--40px left--20px">top: -40px; left: -20px;</div>
<div class="transform-translateY--50%">translateY(-50%)</div>

Compiled Output:


.margin-top-16px { margin-top: 16px; }
.margin-top--16px { margin-top: -16px; }
.top--40px { top: -40px; }
.left--20px { left: -20px; }
.transform-translateY--50\% { transform: translateY(-50%); }

B. Decimal Points (`.` vs `d`)

Decimals can be written using native dots (1.5rem) or the escaped token d (1d5rem):


<p class="font-size-1.5rem line-height-1.4">Standard dot notation</p>
<p class="font-size-1d5rem line-height-1d4">Token replacement notation</p>

Both compile identically to:


font-size: 1.5rem;
line-height: 1.4;

3. The Universal Color & Opacity Engine

AliasCSS supports 3-digit and 6-digit hex values, named colors, and CSS variables.

A. Decimal Alpha Opacity (`/0.x`)

To apply opacity to any color, append a forward slash (/) followed by a decimal value between 0.0 and 1.0:


<!-- Hex with 10% opacity -->
<div class="background-color-ffffff/0.1"></div>
 
<!-- Brand hex with 85% opacity -->
<div class="background-color-6366f1/0.85"></div>
 
<!-- Named color with 50% opacity -->
<div class="background-color-black/0.5"></div>
 
<!-- Border with 8% opacity -->
<div class="border-1px-solid-ffffff/0.08"></div>

Compiled Output:


.background-color-ffffff\/0\.1 {
  background-color: rgba(255, 255, 255, 0.1);
}
.background-color-6366f1\/0\.85 {
  background-color: rgba(99, 102, 241, 0.85);
}
.background-color-black\/0\.5 {
  background-color: rgba(0, 0, 0, 0.5);
}
.border-1px-solid-ffffff\/0\.08 {
  border: 1px solid rgba(255, 255, 255, 0.08);
}

4. Multi-Value Property Declarations

Properties that accept multiple space-separated values (such as padding, margin, border, box-shadow) use hyphens between arguments:


<!-- 2-value padding: vertical horizontal -->
<div class="padding-12px-24px">padding: 12px 24px;</div>
 
<!-- 4-value margin: top right bottom left -->
<div class="margin-10px-20px-15px-5px">margin: 10px 20px 15px 5px;</div>
 
<!-- Border shorthand: width style color -->
<div class="border-1px-solid-e2e8f0">border: 1px solid #e2e8f0;</div>
 
<!-- Box shadow shorthand: x y blur spread color -->
<div class="box-shadow-0px-4px-12px-000000/0.1">box-shadow: 0px 4px 12px rgba(0,0,0,0.1);</div>

5. Functional Syntax: `property(...)` vs `property(...)_`

When dealing with native CSS functions (such as calc(), clamp(), minmax(), linear-gradient(), or cubic-bezier()), use the functional syntax property(...).

The presence or absence of a trailing underscore (_) controls how internal commas are handled:

A. Comma-to-Space Conversion (Default / No Trailing `_`)

When no trailing underscore is appended, commas inside the parentheses are converted into CSS spaces. This is useful for passing multi-part values:


<div class="transition(transform,0.2s,ease-in-out)"></div>

Compiled Output:


.transition\(transform\,0\.2s\,ease-in-out\) {
  transition: transform 0.2s ease-in-out;
}

B. Literal Comma Preservation Flag (`_`)

Appending a trailing underscore (_) signals the compiler to preserve every internal comma literally. This is essential for CSS functions that require comma-separated parameters:


<!-- Gradients require comma separation -->
<div class="background(linear-gradient(135deg,#0f172a,rgba(99,102,241,0.2),transparent))_"></div>
 
<!-- Fluid math functions: clamp(min, preferred, max) -->
<h1 class="font-size(clamp(2rem,5vw+1rem,4.5rem))_">Fluid Headline</h1>
 
<!-- Responsive grid tracks: repeat(count, track) -->
<div class="grid-template-columns(repeat(auto-fit,minmax(280px,1fr)))_"></div>
 
<!-- Animation timing curves: cubic-bezier(x1, y1, x2, y2) -->
<div class="transition-timing-function(cubic-bezier(0.34,1.56,0.64,1))_"></div>

Compiled Output:


.background\(linear-gradient\(135deg\,\#0f172a\,rgba\(99\,102\,241\,0\.2\)\,transparent\)\)\_ {
  background: linear-gradient(135deg, #0f172a, rgba(99, 102, 241, 0.2), transparent);
}
 
.font-size\(clamp\(2rem\,5vw\+1rem\,4\.5rem\)\)\_ {
  font-size: clamp(2rem, 5vw + 1rem, 4.5rem);
}
 
.grid-template-columns\(repeat\(auto-fit\,minmax\(280px\,1fr\)\)\)\_ {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
 
.transition-timing-function\(cubic-bezier\(0\.34\,1\.56\,0\.64\,1\)\)\_ {
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

6. CSS Variables & Custom Properties

AliasCSS makes consuming and defining CSS Custom Properties straightforward:

A. Consuming Variables (`--var-name`)

A double hyphen followed by a variable identifier resolves directly into var(...):


<!-- Consuming --brand-color and --spacing-base -->
<div class="color---brand-color padding---spacing-base">
  Custom Token Typography
</div>

Compiled Output:


.color---brand-color {
  color: var(--brand-color);
}
.padding---spacing-base {
  padding: var(--spacing-base);
}

B. Bridging Dynamic JavaScript Calculations

For runtime math that depends on dynamic DOM trees (like sibling-index() or scroll progress), pair a CSS variable class with an inline style attribute:


<li 
  class="transition-delay--stagger" 
  style="--stagger: calc(0.1s * (sibling-index() - 1))"
>
  Dynamically Staggered Element
</li>

Compiled Output:


.transition-delay--stagger {
  transition-delay: var(--stagger);
}

7. Multi-Rule Chaining Operator (`__`)

When a single property accepts multiple distinct chained functions or comma-delimited stacks, AliasCSS uses the double underscore (__) operator. This is used across three primary property domains:


┌────────────────────┬──────────────────────────────────────────────────────┬────────────────────────────────────────────────────────┐
│ Domain             │ AliasCSS Chained Syntax                              │ Emitted CSS Output                                     │
├────────────────────┼──────────────────────────────────────────────────────┼────────────────────────────────────────────────────────┤
│ Transforms (Stack) │ tf-rotateX-20deg__rotateY-45deg__translateZ-60px      │ transform: rotateX(20deg) rotateY(45deg) translateZ(60px); │
│ Transitions (List) │ tn-transform-0.2s-ease__box-shadow-0.2s-ease         │ transition: transform 0.2s ease, box-shadow 0.2s ease; │
│ Filters (Chain)    │ filter-drop-shadow--3px--3px-red__sepia-100p         │ filter: drop-shadow(-3px -3px red) sepia(100%);        │
└────────────────────┴──────────────────────────────────────────────────────┴────────────────────────────────────────────────────────┘

Summary Reference Table

Requirement	Syntax Pattern	Example Class	Output CSS
Standard property	`property-value`	`border-radius-12px`	`border-radius: 12px;`
Negative value	`property--value`	`top--10px`	`top: -10px;`
Decimal unit	`property-x.yunit`	`font-size-1.25rem`	`font-size: 1.25rem;`
Alpha opacity	`property-color/0.x`	`bgc-ffffff/0.05`	`background-color: rgba(255,255,255,0.05);`
CSS custom variable	`property---var`	`color---primary`	`color: var(--primary);`
Multi-arg spacing	`property(fn,args)`	`transition(all,0.2s)`	`transition: all 0.2s;`
Literal comma func	`property(fn,args)_`	`background(linear-gradient(...))_`	`background: linear-gradient(...);`
Multi-function chain	`property-fn1__fn2`	`tf-scale-1.1__rotate-45deg`	`transform: scale(1.1) rotate(45deg);`

Properties & Values

1. Syntax Anatomy

2. Numbers, Units & Decimals

A. Positive vs. Negative Values (--)

B. Decimal Points (. vs d)

3. The Universal Color & Opacity Engine

A. Decimal Alpha Opacity (/0.x)

4. Multi-Value Property Declarations

5. Functional Syntax: property(...) vs property(...)_

A. Comma-to-Space Conversion (Default / No Trailing _)

B. Literal Comma Preservation Flag (_)

6. CSS Variables & Custom Properties

A. Consuming Variables (--var-name)

B. Bridging Dynamic JavaScript Calculations

7. Multi-Rule Chaining Operator (__)

Summary Reference Table

A. Positive vs. Negative Values (`--`)

B. Decimal Points (`.` vs `d`)

A. Decimal Alpha Opacity (`/0.x`)

5. Functional Syntax: `property(...)` vs `property(...)_`

A. Comma-to-Space Conversion (Default / No Trailing `_`)

B. Literal Comma Preservation Flag (`_`)

A. Consuming Variables (`--var-name`)

7. Multi-Rule Chaining Operator (`__`)