Welcome Guest! (App Version 5.16)

websitnero logo name

Sass Functions

What are functions in Sass?

Functions in Sass are just like functions in any other programming language. They all take arguments and then perform mathematical or other operations on them and finally return a value. The very same thing they do in Sass also when used.

Sass Functions only make CSS more powerful and close to a programming language by allowing it to use functions and get complex mathematical operations done easily and by wrapping all logic in functions keep the styling clean.

Look at the example below:

main.scss:

@function increaseFont($font-size, $increment){
  @return ($font-size + $increment)+"px";
}

@function decreaseFont($font-size, $decrement){
  @return ($font-size - $decrement)+"px";
}

div {font-size: increaseFont(20, 4);background:yellow;}
p {font-size: decreaseFont(18, 2);background:pink;}

main.css (compiled):

div {font-size: 24px;background:yellow;}
p {font-size: 16px;background:pink;}

index.html:

This is a div.

This is a paragraph.

Inbuilt Functions in Sass

You can always make 'custom functions' but Sass already provides you with many functions in its library using which you can solve many common problems. Here we look at some of these functions below:

1. darken()

This function takes 2 arguments - first the color on which operation is to be done and second by what % the color is to be darken.

p{background: darken(pink, 50%);}

Original Background.

Modified Background

2. lighten()

This function takes 2 arguments - first the color on which operation is to be done and second by what % the color is to be lighten.

p{background: lighten(blue, 25%);}

Original Background.

Modified Background

3. transparentize()

This function again takes 2 arguments - first the color on which operation is to be done and second by what value the color is to be made transparent.

p{background: transparentize(#000, .6);}

Original Background.

Modified Background

4. mix()

This function takes 2 arguments specifying the 2 colors to be mixed.

p{background: mix(#036, #d2e1dd);}

Color 1

Color 2

Mixed

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.