Simple CSS variables like A Pro

Using DOM access, you may create variables, save them, and reuse them across your style sheet.

:root{
    /*CSS variable*/
    --primary:#900c3f;
    --secondary:#ff5733;
}

.btn{
    padding:1rem 1.5 rem;
    background:transparent;
    font-weight: 700;
    color: var(--primary);
    background-color: var(--secondary);
}
.sub-primary{
    color: var(--secondary);
    background-color:var(--primary);
}

Using JavaScript to Manipulate and Control CSS Variables

function changeColor(){
    //Get the element you want to change the variable on
    const myElement = document.qquerySelector("root");

    //Get the current value of the variable
    let currentValue = getComputedStyle(myElement).getPropertyValue(
        "--secondary"
    );

    //Set the new value for the variable
    myElement.style.setProperty("--secondary", "#DAF7A6");
}



    //create a new varuavke
    document.documentElement.style.setProperty('--new-color', 'blue');

    //Remove a variable
    document.documentElement.style.removeProperty('--new-color');

Variables can be used in Media Queries.

Make it simple to change your design for different screen sizes by using variables in media queries.

Use CSS’s Cascading Nature to Your Advantage

Remember that CSS variables are cascading, which means that changing a variable on a parent element affects all of its descendants.

CSS Variables Should Be Used With Care

Using too many CSS variables can cause confusion, so use them carefully and only when they make sense and improve the maintainability of your code.