Gain insights into Sass for CSS, exploring nesting, variables, mixins, and more. Discover methods to structure projects and write dynamic, reusable styles for advanced frontend development.

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 that’s created a website knows that CSS is hard.

In this course, you will learn how to use nesting, variables, mixins, partials, functions and more to write dynamic and reusable styles of code. You’ll also learn the various methods to structure your projects and bring organization to your stylesheets.

By the end of this course, you’ll have advanced knowledge of SASS. You’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 Frontend Development

# Definition

Another great feature of Sass is **inheritance**. We implement this using the ```@extend``` directive. 

Inheritance is a feature of SASS that allows multiple classes to share a common set of properties with one another. 

# Example

Some typical CSS code for styling a button:

```CSS
.button {
  background-color: #0000FF; // Blue
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.5rem;
}
```

If we happen to have a number of buttons on our website, all of which are styled in a similar manner, we would have a good case for inheritance!

We would implement a secondary button via inheritence like so:

```SASS
.button-secondary {
  @extend .button;
  background-color: #4CAF50; // Green
}  
```
Our ```.button-secondary``` class will take on all of the properties and values set the ```.button class```, with the exception of ```background-color``` which we’ve decided to set to green. 

Try it out below!

.button {
  background-color: #0000FF; // Blue
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.5rem;
}

.button-secondary {
  @extend .button;
  background-color: #4CAF50; // Green
}  

<html>
  <head>
    <title>Page Title</title>
  </head>
<body>
 <button class="button">button</button> 
 <button class="button-secondary">button-secondary</button> 
</body>
</html>

codemirror


The use of inheritance helps us to keep our code neat, clean and focused on constructing reusable components.

Up next, we'll take a look at the ```&``` operator.

In this lesson, we'll be looking at how to implement inheritance with the extends directive.

Starting with SASS

SASS Features

Structuring your SASS Projects

Setting up a SASS Build Process

Bonus: Setting up Media Queries with SASS Mixins

Appendix

Inheritance and Extends

Definition #

Example #