Exploring SASS Color Methods -Tutorial Savvy

SASS provide bunch of inbuilt methods to make the CSS Authoring Simple and easy.

In this Demo ,“We will explore SASS inbuilt methods for COLORING“.

RGB/RGBA(Red,Green,Blue with or without Alpha) and HSL/HSLA(Hue,Saturation,Lightness with or without Alpha) are popular used color model for web development.

RGB model is known to everybody.In this model all colors are formed by combination of three colors i.e, red,green and blue.

HSL model is new for web development.In this model a color is made by hue , saturation and lightness.

—HUE : is the pure color without tint or shade.

—SATURATION: is the spread of a color.

—LIGHTNESS: is the intensity of a color.

In this demo we have used inbuilt color methods from SASS to set the background of DIV elements.

Below HTML markup is used for the applying css classes.

<!DOCTYPE html>
<html>
<head>
    <title>SASS Color Methods</title>
    <link rel="stylesheet" type="text/css" href="my-style.css">
</head>
<body>
<h4>HSL Color Methods:-</h4>

        <div class='container-one'>
            background: $backgroundColor;
        </div>

        <div class='container-two'>
            background: darken($backgroundColor, 30%);
        </div>

        <div class='container-three'>
            background: lighten($backgroundColor, 30%);
        </div>

        <div class='container-four'>
            background: invert($backgroundColor);
        </div>
        <div class='container-five'>
            background: complement($backgroundColor);
        </div>
        <div class='container-six'>
            background: saturate($backgroundColor,90%);
        </div>
        <div class='container-seven'>
            background: desaturate($backgroundColor,90%);
        </div>
        <div class='container-eight'>
            background: adjust-hue($backgroundColor,90%);
        </div>
        <div class='container-nine'>
            background: saturation($backgroundColor);
        </div>
        <div class='container-ten'>
            background: hue($backgroundColor);
        </div>
        <div class='container-eleven'>
            background: hsl(180, 20, 30);
        </div>
        <div class='container-tweleve'>
            background: hsla(10, 20, 30,0.2);
        </div>

<h4>RGB Color Methods:-</h4>

        <div class='container-thirteen'>
            background: rgb($myredcolor, $mygreencolor, $mybluecolor);
        </div>

        <div class='container-fourteen'>
            background: rgba($myredcolor, $mygreencolor, $mybluecolor, 0.2);
        </div>

        <div class='container-fifteen'>
            background: red($backgroundColor);
        </div>

        <div class='container-sixteen'>
            background: green($backgroundColor);
        </div>
        <div class='container-seventeen'>
            background: blue($backgroundColor);
        </div>
        <div class='container-eighteen'>
            background: mix(rgb($myredcolor, $mygreencolor, $mybluecolor), #808080);
        </div>

</body>
</html>

This SCSS file contains the SASS code for coloring different DIV elements.Each container is assigned with a css class .Each css class has different SASS coloring method for applying to its background.

$containerHeight : 20px;
$containerWidth : 600px;
$backgroundColor:#00FF00;
$fontColor:#FF0000;
/*HSL colors -- tutorialsavvy.com*/
.container{
  height: $containerHeight;
  width :  $containerWidth;
  color:$fontColor;
  border:1px solid #C0C0C0;
  text-align:left;
}
.container-one{
  @extend .container;
  background: $backgroundColor;

}

.container-two{
  @extend .container;
  background: darken($backgroundColor, 30%);
}

.container-three{
  @extend .container;
  background: lighten($backgroundColor, 30%);
}
.container-four{
  @extend .container;
  background: invert($backgroundColor);
}

.container-five{
  @extend .container;
  background: complement($backgroundColor);
}

.container-six{
  @extend .container;
  background: saturate($backgroundColor,90%);
}

.container-seven{
  @extend .container;
  background: desaturate($backgroundColor,90%);
}
.container-seven{
  @extend .container;
  background: desaturate($backgroundColor,90%);
}

.container-eight{
  @extend .container;
  background: adjust-hue($backgroundColor,90%);
}
.container-nine{
  @extend .container;
  background: saturation($backgroundColor);
}

.container-ten{
  @extend .container;
  background: hue($backgroundColor);
}

.container-eleven{
  @extend .container;
  background: hsl(180, 20, 30);
}

.container-tweleve{
  @extend .container;
  background: hsla(10, 20, 30,0.2);
}

/*RGB colors -- tutorialsavvy.com*/
$myredcolor : 35;
$mygreencolor : 95;
$mybluecolor : 105;

.container-thirteen{
  @extend .container;
  background: rgb($myredcolor, $mygreencolor, $mybluecolor);
}
.container-fourteen{
  @extend .container;
  background: rgba($myredcolor, $mygreencolor, $mybluecolor, 0.2);
}
.container-fifteen{
  @extend .container;
  background: red($backgroundColor);
}
.container-sixteen{
  @extend .container;
  background: green($backgroundColor);
}
.container-seventeen{
  @extend .container;
  background: blue($backgroundColor);
}
.container-eighteen {
  @extend .container;
  background: mix(rgb($myredcolor, $mygreencolor, $mybluecolor), #808080);
}

This is the generated CSS file from the above SCSS file.You can compare both the file and can find the equivalent css value for each SASS coloring methods.

/*HSL colors -- tutorialsavvy.com*/
.container, .container-one, .container-two, .container-three, .container-four, .container-five, .container-six, .container-seven, .container-eight, .container-nine, .container-ten, .container-eleven, .container-tweleve, .container-thirteen, .container-fourteen, .container-fifteen, .container-sixteen, .container-seventeen, .container-eighteen {
  height: 20px;
  width: 600px;
  color: red;
  border: 1px solid #C0C0C0;
  text-align: left; }

.container-one {
  background: lime; }

.container-two {
  background: #006600; }

.container-three {
  background: #99ff99; }

.container-four {
  background: magenta; }

.container-five {
  background: magenta; }

.container-six {
  background: lime; }

.container-seven {
  background: #738c73; }

.container-seven {
  background: #738c73; }

.container-eight {
  background: #007fff; }

.container-nine {
  background: 100%; }

.container-ten {
  background: 120deg; }

.container-eleven {
  background: #3d5c5c; }

.container-tweleve {
  background: rgba(92, 66, 61, 0.2); }

/*RGB colors -- tutorialsavvy.com*/
.container-thirteen {
  background: #235f69; }

.container-fourteen {
  background: rgba(35, 95, 105, 0.2); }

.container-fifteen {
  background: 0; }

.container-sixteen {
  background: 255; }

.container-seventeen {
  background: 0; }

.container-eighteen {
  background: #516f74; }

The below fiddle has the HTML and generated css and also shows the output,

The output of the code will look like below screenshot,

Sep 21, 2013Sandeep

Exploring SASS Color Methods

Related

Sandeep