Css has functions that can be used to set values.

attr() function

The attr()function can be used with any CSS property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse. The attr() CSS function is used to retrieve the value of an attribute of the selected element and use it in the stylesheet. 

<div class="col-9">
   <p id="mySite"><a href="https://lovemesomecoding.com">Visit lovemesomecoding</a></p>
</div>

<style>
   #mySite > a:after {content: " (" attr(href) ")";}
</style>

calc() function

The calc() CSS function allows you to perform calculations when specifying CSS property values. The calc() function takes a single expression as its parameter, with the expression’s result used as the value. The expression can be any simple expression combining the following operators, using standard  operator precedence rule.

<div class="col-9">
    <p id="myMessage">Learning css functions</p>
</div>

<style>
       #myMessage{
            background-color: lightblue;
            width: calc(100% - 120px);
            text-align: center;
       }
 </style>

var() function

The var() CSS function  can be used to insert the value of a custom property (sometimes called a “CSS variable”) instead of any part of a value of another property.

    <div class="col-9">
        <p id="myVar">Learning css functions</p>
    </div>

<style>
            :root {
                --favoriteColor: coral;
            }
     
           #myVar{
                background-color: var(--favoriteColor);
                width: calc(100% - 120px);
                text-align: center;
           }
        </style>

repeat-linear-gradient() function

The repeating-linear-gradient() CSS function creates an image consisting of repeating linear gradients. It is similar to linear-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.

    <div class="col-9">
        <p id="myLinearGradient">Learning css functions</p>
    </div>

<style>
           #myLinearGradient{
                background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
                height: 300px;
                text-align: center;
           }
        </style>

Source code on Github