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

**Interpolation** is essentially a code insertion. It allows us to interpolate SASS expressions into our code. We can use it to use a selector or property name, quoted or unquoted strings etc, as variables.

## Syntax
To interpolate an expression we need to wrap the expression using ```#{ }```.
```SASS
#{$variable_name}
```

Let's see an example that shows how we could use interpolation with a mixin:

```SASS
@mixin interpolation($editable, $val, $val2, $prop1, $prop2)
{
    background-#{$editable}: $val;
    position: $val2;
    #{$prop1}: 0px; 
    #{$prop2}: 0px;
}


.block1{
    @include interpolation("image", url("img.png"), absolute, top, right);
}

.block2{
    @include interpolation("color", lightgray, absolute, top, left);
}
```

This will compile in CSS as follows:

```CSS
.block1 {
    background-image: url("img.png");
    position: absolute;
    top: 0px;
    right: 0px;
}
  
.block2 {
   background-color: lightgray;
   position: absolute;
   top: 0px;
   left: 0px;
}
```
As you can see, it’s quite easy to use this to create dynamically reusable code!

## Main reasons to use Interpolation

- We can use dynamically created names as a property name, a variable name or for other similar purposes.

- We can create highly reusable code!

Next, we'll learn how to use placeholders in SASS.

# Definition

**Interpolation** is essentially a code insertion. It allows us to interpolate SASS expressions into our code. We can use it to use a selector or property name, quoted or unquoted strings etc, as variables.

# Syntax
To interpolate an expression we need to wrap the expression using ```#{ }```.
```SASS
#{$variable_name}
```

Let's see an example that shows how we could use interpolation with a mixin:

```SASS
@mixin interpolation($editable, $val, $val2, $prop1, $prop2)
{
    background-#{$editable}: $val;
    position: $val2;
    #{$prop1}: 0px; 
    #{$prop2}: 0px;
}


.block1{
    @include interpolation("image", url("img.png"), absolute, top, right);
}

.block2{
    @include interpolation("color", lightgray, absolute, top, left);
}
```

This will compile in CSS as follows:

```CSS
.block1 {
    background-image: url("img.png");
    position: absolute;
    top: 0px;
    right: 0px;
}
  
.block2 {
   background-color: lightgray;
   position: absolute;
   top: 0px;
   left: 0px;
}
```
As you can see, it’s quite easy to use this to create dynamically reusable code!

# Main reasons to use Interpolation

- We can use dynamically created names as a property name, a variable name or for other similar purposes.

- We can create highly reusable code!

Next, we'll learn how to use placeholders in SASS.

In this lesson, we'll learn how to use Interpolation to make our code more dynamic.


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