CCSS Range mapping

ranges.css

small-font-size = (window[width] ... 400) => {14, 18, 22};
small-font-size = (window[width] ... 400) quad in-out => {14, 18, 22};


->  // clip
=>  // extend

~> // alternate
|> // repeat

# 


// right arrow - drives spring to maximum when applied

top: = 100		    ->           movement;
top: = 100 		    -> 0.5       movement;
top: = 100 		    -> 0.5 ... 1 movement;

left: = 100         ->           movement
left: = 200 ... 100 -> 0.5       movement;
left: = 200 ...     -> 0.5 ... 1 movement;


// => extend interpolates given range after 1
left: = 200 ... 100 => 0.5 ... 1 movement;

// ~> alternate shrinks in odd range
left: = 200 ... 100 ~> 0.5 ... 1 movement;

// |> starts over on overflow
left: = 200 ... 100 |> 0.5 ... 1 movement;

// ~> alternate shrinks in odd range
left: = 200 ... 100 ~> 0.5 ... 1 movement;

// => starts at 200 interpolates given range after 1
left: = 200 ... 100 ->= 0.5 ... 1 movement;

// => starts at 400, interpolates range after 1
left: = 200 ... 100 =>= 0.5 ... 1 quad in-out movement;


// left arrow - binds to spring
// Expression will only be executed if precondition matches
// Modifiers define starting/ending values
top: = 100		    <-           movement;
top: = 100 		    <- 0.5       movement;
top: = 100 		    <- 0.5 ... 1 movement;

left: = 100         <-           movement
left: = 200 ... 100 <- 0.5       movement;
left: = 200 ...     <- 0.5 ... 1 movement;

// => extend interpolates given range after 1
left: = 200 ... 100 <= 0.5 ... 1 movement;

// ~> alternate shrinks in odd range
left: = 200 ... 100 <~ 0.5 ... 1 movement;

// |> resets on overflow
left: = 200 ... 100 <| 0.5 ... 1 movement;