Course

CSS Tips and Tricks

1
Use the Border-Radius CSS Property to Define Horizontal and Vertical Radius
3m 43s
2
Explore a Site's CSS with Chrome DevTools CSS Overview
1m 58s
3
Create an Animated Underline Effect using CSS Transition and CSS Background Position
4m 31s
4
Use the HSL Color Space and Scoped CSS Variables to Prototype UI Variants
2m 47s
5
Use content-visibility: auto to Improve Initial Page Load Time
2m 6s
6
Use CSS @keyframes to Create a Basic Loading Animation
2m 36s
7
Use CSS filter to Create a Drop Shadow
1m 28s
8
Use CSS pseudo-elements and mix-blend-mode to Create a Duotone Style Effect
2m 24s
9
Use CSS Variables to Maintain the Aspect Ratio for an Element
1m 19s
10
Use Multiple Background Images to Create Single Element CSS Art
4m 22s
11
Use CSS Variables Almost like Boolean Values with Calc
3m 59s
12
Use CSS Transforms to Create Configurable 3D Cuboids
5m 17s
13
Use CSS Variables with Calc and HSL to Implement Dark Mode
2m 5s
14
Use CSS Scroll Behavior for Animated Anchor Scrolls
1m 41s
15
Use CSS Scroll Margin to Give Content Breathing Room
1m 49s
16
Use CSS @property to Animate and Transition Custom Properties
2m 56s
17
Use CSS Resize to Create Resizable Elements
1m 14s
18
Use CSS aspect-ratio to prescribe an aspect ratio for an element
1m 7s

Use CSS Variables Almost like Boolean Values with Calc

InstructorJhey Tompkins

Share this video with your friends

Send Tweet

Published 4 years ago

Updated 4 years ago

In this lesson, we explore how you can use CSS variables almost like Boolean values in combination with calc().

By setting a variable to 1 or 0 and then using logical operators, we can abstract and decouple areas of our CSS. This can ease maintenance when our CSS starts to get complicated. In this example, we walk through how a variable could be used to dictate part of an element's transform.

View code for this lesson

CSS Tips and Tricks

Use CSS Variables Almost like Boolean Values with Calc

Social Share Links