CSS - Variables

Instructors: Jess

Variables

Before this session, please:

• Read Working with CSS Variables: What Are CSS Custom Properties, and How Do They Work? and take notes
• Read Working with CSS Variables: What Is the @property Rule, and How Does It Work with Fallbacks? and take notes
• Try to complete as many steps from Build a City Skyline before class. This workshop is big and you may need to complete this over the next few days
• Complete Build an Availability Table solo over the next few days. Make sure you don’t just copy the example, think before using green.
• Read CSS Variables Review and take notes
• Complete CSS Variables Quiz solo to test your knowledge of CSS Variables

During this session, we’ll:

• Review notes
• Review notes
• We’ll work through key steps from Build a City Skyline together to review what we’re learning
• We’ll look at approaches you could take to complete Build an Availability Table solo over the next few days
• Review notes

After this session, please:

• Read Working with CSS Grid: What Is CSS Grid, and How Does It Differ from Flexbox? and take notes
• Read Working with CSS Grid: How Can You Create Flexible Grids with the fr Unit? and take notes
• Read Working with CSS Grid: How Can You Create Gaps Between Tracks in a Grid? and take notes
• Read Working with CSS Grid: How Can You Repeat Track Listings in a Grid Layout? and take notes
• Read Working with CSS Grid: What Is the Difference Between an Implicit and Explicit Grid? and take notes
• Read Working with CSS Grid: What Is the minmax() Function and How Does It Work? and take notes
• Read Working with CSS Grid: How Do the grid-column and grid-row Properties Work? and take notes
• Read Working with CSS Grid: How Can You Position Items on the Grid Using the grid-template-areas Property? and take notes
• Try to complete as many steps from Build a Magazine as possible, you may need to complete this workshop over the next few days

Instructor notes

Working with CSS Variables: What Are CSS Custom Properties, and How Do They Work?

With CSS variables (or, custom properties), we can reuse values.

To declare a variable, the property name has to start with two dashes (--). Usually, global variables are declared inside the :root, because it represents the highest-level parent in the DOM tree.

We can use the variable on an element using the var() function:

1:root {
2  --bwc-purple: #ba6dc6;
3}
4
5.container {
6  border: 2px solid var(--bwc-purple);
7}

Since they follow the CSS cascade, we can redefine them on a specific element:

1:root {
2  --main-color: #3498db;
3}
4
5.button {
6  background-color: var(--main-color);
7}

Using variables is common when designing dark/light themes…:

 1:root {
 2  --bg-color: black;
 3}
 4
 5body {
 6  background-color: var(--bg-color);
 7}
 8
 9.light-theme {
10  --bg-color: white;
11  --text-color: black;
12  background-color: var(--bg-color);
13  color: var(--text-color);
14}

…and with media queries to create responsive designs:

 1:root {
 2  --card-width: 90%;
 3  --card-bg: #f0f0f0;
 4  --card-padding: 1rem;
 5  --text-color: #333;
 6}
 7
 8/* Tablet screens and up */
 9@media (min-width: 600px) {
10  :root {
11    --card-width: 70%;
12    --card-bg: #e8f5e9;
13    --card-padding: 1.5rem;
14  }
15}
16
17/* Desktop screens and up */
18@media (min-width: 1024px) {
19  :root {
20    --card-width: 50%;
21    --card-bg: #d0f0ff;
22    --card-padding: 2rem;
23  }
24}

We can also add a fallback value inside the var() function.

In this example, if --text-color is not defined, it will default to green:

1:root {
2  --text-color: green;
3}
4
5.text {
6  color: var(--text-color, green);
7}

Variables can reference other variables as well:

1:root {
2  --primary-color: #3498db;
3  --button-bg: var(--primary-color);
4}
5
6button {
7  background-color: var(--button-bg);
8}

While variables are well-supported, there might be some older browsers that may not recognize them, so we should make sure to provide fallback values.

Working with CSS Variables: What Is the @property Rule, and How Does It Work with Fallbacks?

With @property rule, variables (or, custom properties) can be explicitly defined.

1@property --main-color {
2  syntax: '<color>';
3  inherits: false;
4  initial-value: #3498db;
5}
6
7.button {
8  background-color: var(--main-color);
9}

• syntax is the type of the property, for example, it can be <color>, <length>, <number>, <percentage>, or more complex types.
• inherits specifies whether the property should inherit its value from its parent element.
• initial-value is the default value of the property.

With @property, custom properties can even be animated!

In this example, when the div is hovered over, the gradient angle will smoothly change to 90 degrees:

1<div class="gradient-box"></div>

 1@property --gradient-angle {
 2  syntax: '<angle>';
 3  inherits: false;
 4  initial-value: 0deg;
 5}
 6
 7.gradient-box {
 8  width: 100px;
 9  height: 100px;
10  background: linear-gradient(var(--gradient-angle), red, blue);
11  transition: --gradient-angle 0.5s;
12}
13
14.gradient-box:hover {
15  --gradient-angle: 90deg;
16}

To provide fallbacks to variables defined with @property, we can consider:

• Declaring the variable in traditional way alongside the @property rule:

 1:root {
 2  --main-color: #3498db;
 3}
 4
 5@property --main-color {
 6  syntax: '<color>';
 7  inherits: false;
 8  initial-value: #3498db;
 9}
10
11body {
12  background-color: var(--main-color);
13}

• Using a fallback value inside var():

1@property --main-color {
2  syntax: '<color>';
3  inherits: false;
4  initial-value: #3498db;
5}
6
7body {
8  background-color: var(--main-color, #3498db);
9}

• Providing type-safe fallbacks in initial-value (making sure the initial-value reflects the type defined in syntax):

 1@property --padding {
 2  syntax: '<length>';
 3  inherits: false;
 4  initial-value: 10px;
 5}
 6
 7.box {
 8  width: 100px;
 9  height: 100px;
10  background-color: darkred;
11  color: white;
12  padding: var(--padding);
13}

Build a City Skyline

We’ll take a look at this cool workshop that goes over HTML and CSS concepts we’ve learned together!

Build an Availability Table

This exercise includes CSS variables and some HTML topics we’ve learned!

CSS Variables Review

In this unit, we’ve explored:

• CSS custom properties (CSS variables)
• The @property rule