# Custom Properties

# CSS Custom Properties

            :root {
                --my-color: purple;
            }

            .test {
                background-color: var(--my-color);
            }

            .test-parent {
                --my-color: pink;
            }

                .test

This should be purple

                .test-parent

                    .test

This should be pink

## Fallback Values

            .test-fallback {
                background-color: var(--fallback, lime);
            }

            .test-fallback.with {
                --fallback: cyan;
            }

    .test-fallback

This should be green

    .test-fallback.with

This should be cyan

## Inline properties

            <div style="--color: turquoise; background-color: var(--color)">

This should be turquoise

## Nested var()

            :root {
                --width: 10px;
                --color: orange;
                --style: solid;
                --border: var(--width) var(--color) var(--style);
            }
            .test-nested {
                border: var(--border);
            }

    .test-nested

This should have a 10px solid orange border

            .test-inside-a-function {
                --blue: 255;
                background-color: rgb(255, 0, var(--blue));
            }

    .test-inside-a-function

This should be fuchsia

## Mixed var()

            :root {
                --background-color: yellow;
                --background-position: top 10px right 5px;
            }

            .test-mixed {
                background: var(--background-color) url("background-repeat.png") var(--background-position) no-repeat;
            }

    .test-mixed

This should have a yellow background with a smiley face in the top-right corner

## Billion laughs attack

            .billion-laughs {
                --prop1: lol;
                --prop2: var(--prop1) var(--prop1);
                --prop3: var(--prop2) var(--prop2);

                /* ... */

                --prop30: var(--prop29) var(--prop29);

                background: var(--prop30);
            }

    .billion-laughs

This box tests that we handle the billion laughs attack. If we don't crash, it worked!

## Dependency cycles

            .dependency-cycle {
                --recursive: var(--recursive);

                --a: var(--b);
                --b: var(--a);

                background: var(--a);
                color: var(--recursive);
            }

    .dependency-cycle

This box tests that we handle dependency cycles correctly. If we don't crash, it worked!