CYBER WEEK SALE: Get 50% off your Pro annual membership using code [CYBER23](https://www.codecademy.com/checkout?periods=year&plan_id=proGoldAnnualV2&discountCode=CYBER23)


Learn to use Sass functions, loops, and conditions to style different components of a webpage. 

Functions and Operations

As mentioned, Sass specifically comes equipped with functions that make working with colors easier. 

The _alpha parameter_ in a color like RGBA or HSLA is a mask denoting opacity. It specifies how one color should be merged with another when the two are on top of each other.

* In Sass, the function `fade-out` makes a color more transparent by taking a number between 0 and 1 and decreasing opacity, or the alpha channel, by that amount:

```scss
   $color: rgba(39, 39, 39, 0.5);
   $amount: 0.1;
   $color2: fade-out($color, $amount);//rgba(39, 39, 39, 0.4) 
 ```

* The `fade-in` color function changes a color by increasing its opacity:
 
 ```scss
 $color: rgba(55,7,56, 0.5);
 $amount: 0.1;
 $color2: fade-in($color, $amount); //rgba(55,7,56, 0.6)
 ```

* The function `adjust-hue($color, $degrees)` changes the hue of a color by taking color and a number of degrees (usually between -360 degrees and 360 degrees), and rotate the color wheel by that amount.




Arithmetic and Color

Beyond the simple math and color transformations we explored in the previous exercises, Sass also allows for more complex functions.

*Each loops* in Sass iterate on each of the values on a list. The syntax is as follows:

```scss
@each $item in $list {
  //some rules and or conditions
}
```
The value of `$item` is dynamically assigned to the value of the object in the list according to its position and the iteration of the loop.

Each Loops

Sass also allows us to perform mathematical functions to compute measurements&mdash; including colors.

Here is how Sass computes colors:

1. The operation is performed on the red, green, and blue components. 
2. It computes the answer by operating on every two digits. 

```scss
$color: #010203 + #040506;
```
The above would compute piece-wise as follows:
```scss
01 + 04 = 05
02 + 05 = 07
03 + 06 = 09
```
and compile to:
```scss
color: #050709;
```

Sass arithmetic can also compute HSLA and string colors such as `red` and `blue`.

Color Functions

In CSS the `/`   character can be used 
as a separator. In Sass, the character is also used in division. 

Here are the specific instances `/` counts as division:
1. If the value, or any part of it, is stored in a variable or returned
 by a function.
2. If the value is surrounded by parentheses, unless those parentheses 
are outside a list and the value is inside.
3. If the value is used as part of another arithmetic expression.

Here are a few examples:
```scss
width: $variable/6; //division
line-height: (600px)/9; //division
margin-left: 20-10 px/ 2; //division
font-size: 10px/8px; //not division
```



Division Can Be Special

**Functions** and **operations** in Sass allow for computing and iterating on styles.

With Sass functions you can:
+ Operate on color values
+ Iterate on lists and maps
+ Apply styles based on conditions
+ Assign values that result from math operations

This lesson will focus on unlocking their power!



Functions in SCSS

* **Functions** in Sass allow for an easier way to style pages, work with colors, and iterate on DOM elements.

* Having both **for loops** and **each loops** gives the programmer different formats to iterate on both lists and maps.

* The introduction of **conditional statements** allows you to create logic-based styling rules using SCSS.

There are other native Sass functions available to use, and you can even make your own custom functions if you have a good foundation in Ruby, check out more information <a href="http://sass-lang.com/documentation/Sass/Script/Functions.html" target="_blank">here</a>.

Congrats! This lesson equipped you with new knowledge on some of the most popular functions and operations available to you in SCSS. Next, let's learn about the best practices for growing your Sass codebase.

Generalizations

The Sass arithmetic operations are:

1. addition `+`
2. subtraction `-`
3. multiplication `*`
4. division `/`, and 
5. modulo `%`. 

**Note:** Modulo, or `%`, is the remainder in a given division, so "9%2" would be "1".

SCSS arithmetic requires that the units are 
compatible; for example, you can't multiply pixels by ems.


Also, just like in regular math, multiplying two units together results in squared units:`10px * 10px = 100px * px`. 

Since there is no such thing as squared units in CSS, the above would throw an error. You would need to multiply `10px * 10` in order to obtain `100px`.

Arithmetic

In Sass, `if()` is a function that can only branch one of two ways based on a condition. You can use it inline, to assign the value of a property:
```scss
width: if( $condition, $value-if-true, $value-if-false);
```

For cases with more than two outcomes, the `@if`, `@else-if`, and `@else` directives allow for more 
flexibility.


```scss
@mixin deck($suit) {
 @if($suit == hearts || $suit == spades){
   color: blue;
 }
 @else-if($suit == clovers || $suit == diamonds){
   color: red;
 }
 @else{
   //some rule
 }
}
```

The mixin above is a good example for how we would want to handle the coloring of a deck of cards based on a suit condition.

Conditionals

*For loops* in Sass can be used to style numerous elements or assigning properties all at once. They work like any for-loop you've seen before.

Sass's for loop syntax is as follows:

```scss
@for $i from $begin through $end {
   //some rules and or conditions
}
```

In the example above:
1. `$i` is just a variable for the index, or position of the element in the list
2. `$begin` and `$end` are  placeholders for the start and end points of the loop. 
3. The keywords `through` and `to` are interchangeable in Sass

For-loops are useful for many things, but in the following exercises we will be using them to style a block of rainbow divs!