---
source: crates/biome_formatter_test/src/snapshot_builder.rs
info: css/variables.css
---

# Input

```css
.foo {
    --prop: 10px;
    prop1: var(--prop);
    prop2: var(--my-var, --my-background, pink);
    prop3: calc(var(--prop) * 1px);
}

.bar {
    --prop   : 15px;

    prop2: var(    --prop);

    prop3: var(

    --prop
    );

    prop4: var(
        --prop   , pink
    );

    prop5: 
        var  (  --one-var-thats-super-long-on-its-own , --super-long-just-enough-to-make-it-break-over-lines
        
        );
}


.multiple {
    prop: var(--prop1)    var(prop2);
    prop: 
    var(--prop1)   
    var(prop2);

    prop: hsl(
        var(--hue, 
        0) 
        var(
            --sat, 100
            
            ) var(--light  ,  1));
}
```


=============================

# Outputs

## Output 1

-----
Indent style: Tab
Indent width: 2
Line ending: LF
Line width: 80
Quote style: Double Quotes
-----

```css
.foo {
	--prop: 10px;
	prop1: var(--prop);
	prop2: var(--my-var, --my-background, pink);
	prop3: calc(var(--prop) * 1px);
}

.bar {
	--prop: 15px;

	prop2: var(--prop);

	prop3: var(--prop);

	prop4: var(--prop, pink);

	prop5: var(
			--one-var-thats-super-long-on-its-own,
			--super-long-just-enough-to-make-it-break-over-lines
		);
}

.multiple {
	prop: var(--prop1) var(prop2);
	prop: var(--prop1) var(prop2);

	prop: hsl(var(--hue, 0) var(--sat, 100) var(--light, 1));
}
```