DEV Community

Karen Payne
Karen Payne

Posted on • Updated on

Using CSS custom properties (variables) in Razor Pages

Introduction

CSS custom properties (variables) are entities defined by the developer that contain specific values to be reused throughout a document.

Custom properties use the notation as follows --main-text-color: darkgreen; and when used they are accessed via var() CSS function.

Note
Variables do not work inside media queries and container queries. The var() function can be used in place of any part of a value in any property on an element. The var() function cannot be used as property names, selectors, or anything else besides property values. So, we can't use it in a media query or container query.

GitHub source code

Basic usage

Note
Although the sample project has Bootstrap included, Bootstrap is not used for the following samples.

web page using css variables

▶️ For all H1 elements padding left should be 1.5em. In a style sheet file add the following.

▶️ :root is a CSS pseudo-class which matches the root element of a tree representing the document. In HTML



:root {
    --h1-left-padding: 1.5em;
}


Enter fullscreen mode Exit fullscreen mode

Also add the rule for H1 blow the above.



h1 {
    padding-left: var(--h1-left-padding);
}


Enter fullscreen mode Exit fullscreen mode

Add a reference for the above style sheet to a Razor Page and add a H1 element which uses the above style.



<h1>CSS variables</h1>


Enter fullscreen mode Exit fullscreen mode

Another example is changing a button inputs box-shadow and on hover, the color.



button {
    box-shadow: .1em .1em .1em var(--shadow-color);
}

button:hover {
    --shadow-color: skyblue;
}


Enter fullscreen mode Exit fullscreen mode

Read/Set CSS properties with JavaScript

Start by aquiring a reference to :root in a script section or script file which a page references.



const r = document.querySelector(':root');


Enter fullscreen mode Exit fullscreen mode

Then use Window.getComputedStyle() method returns an object containing the values of all CSS properties of an element.



var rs = getComputedStyle(r);


Enter fullscreen mode Exit fullscreen mode

In this case we want the value for --main-text-color, use the following to get the value.



rs.getPropertyValue('--main-text-color')


Enter fullscreen mode Exit fullscreen mode

Real life example

The task is to allow visitors to change colors of P tags to keep it simple where once they change the color, immediately change the color. To persist consider localstorage if supported.

To give a nice interface the code uses jsuites.net (see used in image above) which can be installed with libman.

Once jsuites.net is installed reference these files.



<script src="lib/jsuites/jsuites.js"></script>
<link rel="stylesheet" href="lib/jsuites/jsuites.css" />


Enter fullscreen mode Exit fullscreen mode

Add a div as follows where the id is important as it will be used in code below.



<div>
    <div id="colors" style="margin-left: 13.5em;margin-top:.5em"></div>
</div>


Enter fullscreen mode Exit fullscreen mode

Initializing a dropdown

  • indicate data and note value is same as text while a developer can set value to a number if needed for referencing other data.
  • Set the width
  • Set the initial value


jSuites.dropdown(document.getElementById('colors'), {
    data: [
        { color: 'blue', value: 'blue', text: 'blue' },
        { color: 'black', value: 'black', text: 'black' },
        { color: 'green', value: 'green', text: 'green' },
        { color: 'red', value: 'red', text: 'red' },
        { color: 'red', value: 'pink', text: 'pink' },

    ],
    width: '135px',
    value: "pink"
});


Enter fullscreen mode Exit fullscreen mode

To change the color of all P elements to the selected color from the above dropdown.



document.documentElement.style
   .setProperty('--main-text-color', document.getElementById("colors").value);


Enter fullscreen mode Exit fullscreen mode

CSS custom properties (variables) support

See the following page.

For any project type

Suppose there is a need for CSS isolation for a plain HTML project (not Blazor or Razor Pages)? Let's look at a rule for index.html.



:root.indexPage .special {
    color: white;
    background-color: black;
}


Enter fullscreen mode Exit fullscreen mode

Then in index.html specify the rule in the html tag.



<html class="indexPage">


Enter fullscreen mode Exit fullscreen mode

Then lets target a single button.



<button type="button"  class="special">Go</button>


Enter fullscreen mode Exit fullscreen mode

Another method with child selectors, in this case placed into a sparate file.



:root {
  --color-one: yellow;
  --color-two: green;
  background-color: var(--color-one);
  color: var(--color-two);
}

:root.posts {
  --color-one: green;
  --color-two: yellow;
  background-color: var(--color-one);
  color: var(--color-two);
}

.special {
  color: #f0f;
  font-style: italic;
}

:root.posts .special {
  color: #f90;
  font-style: normal;
  text-transform: uppercase;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
}


Enter fullscreen mode Exit fullscreen mode

The html



<!DOCTYPE html>
<html lang="en" class="posts">
<head>
<meta charset="utf-8" />
<title></title>
<link href="lib/site.css" rel="stylesheet" />
</head>
<body>
<p>
Hello
</p>
<p class="special">Special content</p>
</body>
</html>

Enter fullscreen mode Exit fullscreen mode




Summary

This article has provided the basics for CSS custom properties (variables) with a Razor Page project which allow developers to define values in a single place and reuse them throughout the stylesheet, reducing the need for repetitive code and making it easier to make global changes.

There are many great resources out there to expand your knowledge once past the basics.

Source code

Clone the following GitHub repository

Top comments (0)