Learn SASS to create dynamic, reusable styles and efficiently manage and migrate CSS projects.

Web Page Styling—CSS

SASS (Syntactically Awesome Style Sheets) is a scripting language known as a CSS preprocessor. CSS preprocessors are compiled into CSS and, by doing so, extend the default capabilities of CSS. SASS makes authoring stylesheets faster, easier, and more flexible. It’s a welcome helper in the world of web design because anyone who’s created a website knows that CSS is hard. In this module, we’ll learn how to use nesting, variables, mixins, partials, functions, and more to write dynamic and reusable styles of code. We’ll also learn the various methods to structure our projects and bring organization to our stylesheets. By the end of this module, we’ll have advanced knowledge of SASS. We’ll be able to migrate an existing CSS codebase, as well as set up an entire project (and build process) from scratch.

Sass for CSS: Advanced Front-End Development

## Definition
Sass **functions** can receive arguments and return a single value. 

They add an element of programming to writing CSS code, and we can now do math!

The standard math operators ```+```, ```-```, ```*```, ```/```, and ```%``` can all be utilized.

## Example

The following function can accept two arguments, ```$first-number``` and ```$second-number```. The value that is returned by the function is the sum of the two variables:

```SASS
@function add-numbers($first-number, $second-number) {
  @return $first-number + $second-number
}
```
Say we want to replace the value of a ```padding``` property with the sum of two separate values. 

We would call our function and pass in the arguments like so:

```SASS
.box1 {
  padding: add-numbers(5px, 10px);
}
```

The resulting CSS output would be:
```CSS
.box1 {
  padding: 15px;
}
```

Try it out below!


# Definition
Sass **functions** can receive arguments and return a single value. 

They add an element of programming to writing CSS code, and we can now do math!

The standard math operators ```+```, ```-```, ```*```, ```/```, and ```%``` can all be utilized.

# Example

The following function can accept two arguments, ```$first-number``` and ```$second-number```. The value that is returned by the function is the sum of the two variables:

```SASS
@function add-numbers($first-number, $second-number) {
  @return $first-number + $second-number
}
```
Say we want to replace the value of a ```padding``` property with the sum of two separate values. 

We would call our function and pass in the arguments like so:

```SASS
.box1 {
  padding: add-numbers(5px, 10px);
}
```

The resulting CSS output would be:
```CSS
.box1 {
  padding: 15px;
}
```

Try it out below!


# Definition
Sass **functions** can receive arguments and return a single value. 

They add an element of programming to writing CSS code, and we can now do math!

The standard math operators ```+```, ```-```, ```*```, ```/```, and ```%``` can all be utilized.

# Example

The following function can accept two arguments, ```＄first-number``` and ```＄second-number```. The value that is returned by the function is the sum of the two variables:

```SASS
@function add-numbers($first-number, $second-number) {
  @return $first-number + $second-number
}
```
Say we want to replace the value of a ```padding``` property with the sum of two separate values. 

We would call our function and pass in the arguments like so:

```SASS
.box1 {
  padding: add-numbers(5px, 10px);
}
```

The resulting CSS output would be:
```CSS
.box1 {
  padding: 15px;
}
```

Try it out below!


In this lesson, we'll be looking at how to write functions in SASS.

Starting with SASS

SASS Features

Structuring your SASS Projects

Setting up a SASS Build Process

Bonus: Setting up Media Queries with SASS Mixins

Appendix

Conclusion

Functions

Definition #