DEV Community

Cover image for Manipulate Colors With Sass
aryaziai
aryaziai

Posted on • Edited on

2 1

Manipulate Colors With Sass

Sass

Before jumping into the code, I'd first like to provide a brief description of Sass for anyone who isn't familiar with this specific stylesheet language. Sass (Syntactically awesome style sheets) is a CSS preprocessor. It adds additional features such as variables, nested rules and mixins into CSS. Sass allows developers to write code with these features and then compile it into a single CSS file (commonly through this extension). Sass is currently the most popular preprocessor, other well-known css-preprocessors include Less and Stylus.

Syntax Example:


As you can see, it's almost identical to CSS!

Manipulating Colors

1. Lighten()

$btn-primary: red;

.btn {
  background: $btn-primary;
  &:hover {
    background: lighten($btn-primary, 10%)
  }
}

// Lightens button by 10% in hover state

Creates a lighter color of color with an amount between 0% and 100%. The amount parameter increases the HSL lightness by that percent.

2. Darken()

$btn-primary: red;

.btn {
  background: $btn-primary;
  &:hover {
    background: darken($btn-primary, 10%)
  }
}

// Darkens button by 10% in hover state

Creates a darker color of color with an amount between 0% and 100%.
The amount parameter decreases the HSL lightness by that percent.

3. Mix()

body {
  background: mix(blue, green, 50%);
}

// Body background is a mix between blue and green

Creates a color that is a mix of color1 and color2. The weight parameter must be between 0% and 100%. A larger weight means that more of color1 should be used. A smaller weight means that more of color2 should be used. Default is 50%.

4. Transparentize()

.btn {
  padding:10px;
  background: green;
  color: white;
  &:hover {
    background: transparentize(green, 0.5);
  }
}

// Button background becomes 50% transparent in hover state

Creates a more transparent color of color with an amount between 0 and 1. The amount parameter decreases the alpha channel by that amount.

5. Saturate()

.btn {
  padding:10px;
  color: white;
  background-color: saturate(#333,40%);
}

// Button background is a reddish-black color

Creates a more saturated color of color with an amount between 0% and 100%. The amount parameter increases the HSL saturation by that percent.


To see the full list of color manipulation functions, please visit the Color Function Documentation at W3Schools.

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay