# Functions

Sass includes some built-in modules (sass:color, sass:string, sass:math, ...) which contain useful functions
- All built-in modules start with sass: to indicate that they are part of Sass itself
In this course, we will focus on the sass:color module

# sass:color

The sass:color module (opens new window) contains a lot of functions, of which some useful examples are listed below

function call	description
`color.invert($color)`	returns the negative or inverse of `$color`
`color.complement($color)`	returns the RGB complement of `$color`
`color.grayscale($color)`	returns a gray color with the same lightness as `$color`
`color.adjust($color, $lightness:30%)`	increases the `$lightness` of `$color` by `30%`
`color.scale($color, $lightness:-50%)`	fluidly scales the `$lightness` of `$color` by `-50%`
`color.change($color, $alpha:0.5)`	changes the `$alpha` value of `$color` to `0.5`

REMARK

There is a (subtle) difference between color.adjust(), color.scale() and color:change(). We refer to the official sass:color module documentation (opens new window) for an in-depth explanation.

In order to be able the functions of the sass:color module, it should be loaded (at the top of your Sass code) with the @use rule
Note that color.invert($sasscolor) returns a color. As such, this expression can be used as the first parameter of the color.scale() function.

TIP

Use the @debug rule to print the value of an expression (with filename and line number) to your terminal window
- Note that we use the string operator (opens new window) + to concatenate strings in Sass
Unfortunately, this feature does not (yet) work in CodePen

# Example 1B

    
<main>
    <h1>Sass</h1>
    <p><a href="https://sass-lang.com/">Sass</a> (short for Syntactically Awesome Style Sheets) is a preprocessor scripting language that is interpreted or
        compiled into Cascading Style Sheets (CSS).</p>
    <p>Sass exists in 2 syntax variants:</p>
    <ul>
        <li>The original syntax, called "the indented syntax," uses indentation to separate
            code blocks and newline characters to separate rules.
        </li>
        <li>The newer syntax, "SCSS" (Sassy CSS), uses block
            formatting like that of CSS. It uses braces to denote code blocks and semicolons to separate rules within a
            block.
        </li>
    </ul>
    <p>The indented syntax and SCSS files are traditionally given the extensions .sass and .scss, respectively.</p>
</main>
<footer>
    <p>Based on the information found on <a
            href="https://en.wikipedia.org/wiki/Sass_(stylesheet_language)">Wikipedia</a>, The Free Encyclopedia.
        Retrieved January 19, 2021.
    </p>
</footer>

    
@use "sass:color";

$sasscolor: #cf649a;
$fontstack: Verdana, sans-serif;
$fontsize: 14px;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: $fontsize;
}

body {
  font-family: $fontstack;
  line-height: 1.5;
}

main, footer {
  padding: 0 1rem;
}

h1 {
  color: $sasscolor;
  background-color: inherit;
}

h1, p, ul {
  margin-bottom: 1rem;
}

li {
  margin-left: 2rem;
}


footer {
  color: inherit;
  background-color: color.scale(color.invert($sasscolor), $lightness:75%);
}