Programming CSS to perform Sass colour functions

button {
--button-colour-hue: 19;
--button-colour-saturation: 82%;
--button-colour-lightness: 38%;
background-color: hsl(
var(--button-colour-hue),
var(--button-colour-saturation),
var(--button-colour-lightness)
);
}
border-color: hsl(
var(--button-colour-hue),
var(--button-colour-saturation),
calc(var(--button-colour-lightness) - 10%)
);
.cancel {
--button-colour-hue: 0;
--button-colour-saturation: 100%;
--button-colour-lightness: 40%;
}
.admin {
--button-colour-hue: 45;
--button-colour-saturation: 100%;
--button-colour-lightness: 40%;
}

--

--

--

A web developer and author living and working in Brighton, England. Everything I post on Medium is a copy — the originals are on my own website, adactio.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Quickly make your VIM look and feel like VS Code for Web Development.

Preview of VIM Code (VIM + VSCode)

Snowflake Time Travel

The Day Our MongoDB Went Down

Building a Flutter Chat Application with Stream: Building the App (Part 3)

7 Traits to Look for when Hiring a Developer

Unity Deployment: The Escape Button is a Feature

Running for the PSF Board

An extended overview of “The Tools of a Product Manager”

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jeremy Keith

Jeremy Keith

A web developer and author living and working in Brighton, England. Everything I post on Medium is a copy — the originals are on my own website, adactio.com

More from Medium

What the glitch

Accessibility: Common mistakes to avoid

the office congratulation meme which says high score on accessibility audit tools doesnt mean app is accessible

CSS clamp()

HOW CSS TRANSITION WORK