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

Tomcat Cluster on Oracle Cloud with HTTP session persistence

Run your business with ready to use templates.

RevvSales document management provides a large gallery of document templates

Analytics with SQL: Going back in time

AWS Fargate: First hands-on experience and review

Data Source integration with Quarkus

Building your own kind of links

Build A Minimal Quorum Network

Accessing Azure Key Vault Secrets in Azure Kubernetes

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

A djangster story on Storybook

Let’s Talk CSS and Responsive Design

Adding a transition effect for looping background video with pure JS/CSS

Web Components: LWC, Stencil, and Lit by Numbers