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



![](/api/collection/5200180308606976/5033336129978368/page/6460994365685760/image/6738507235065856)

When building websites and apps, we’ll often use media queries to help ensure our layouts’ responsivity. This way, they can adapt to suit the multitudes of devices accessing them, as we need to ensure all of our users are catered for when engaging with our products.


## CSS Media Queries
If you have experience with CSS, you'll likely know that a media query is a CSS3 module which allows content to render and adapt to conditions. Such as screen resolution, for example:

```CSS
@media (max-width: 599px) {
 font-size: 1rem;
}
```

Here, we’ve set the font size to ```1rem``` when the viewport size is **<=** ```599px```.

This is simple enough, and of course we’ll need multiple media queries to have a fully responsive site. 

However, inevitably, the time will come where we’ll need to edit the rules for the actual breakpoints, and searching through all of your code to change every line affected by a rule change is far from ideal. There has to be a better way!


Modern layout specifications have improved greatly over the past few years, [Grid](https://developer.mozilla.org/en-US/docs/Glossary/Grid) and [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) are responsive by default. This helps us to cut down on the amount of media queries required in our projects & makes for cleaner code. 

However, media queries still have a place in modern web development. And as our projects grow bigger, we need a better way of managing them. 

Enter SASS mixins!

## Mixins
As we now know, SASS mixins give us the ability to create reusable chunks of code — they reduce repetition, promote dry code and allow for ease of maintenance.

So writing media queries as mixins to inject into your stylesheets, wherever they’re required makes a whole lot of sense!

Let's now take a look at an example.


## Setting up your mixins

```SASS
@mixin for-phone-only {
  @media (max-width: 599px) { @content; }
}
@mixin for-tablet-portrait-up {
  @media (min-width: 600px) { @content; }
}
@mixin for-tablet-landscape-up {
  @media (min-width: 900px) { @content; }
}
@mixin for-desktop-up {
  @media (min-width: 1200px) { @content; }
}
@mixin for-big-desktop-up {
  @media (min-width: 1800px) { @content; }
}
```

Here, we’ve written up 5 common breakpoints into ```@mixin``` blocks. 

The ```@content``` syntax is a directive of SASS which allows for the insertion of content later on, as you likely won’t be writing all of your queries at once.

## Using a mixin

Say we want to use a mixin to reduce the font size of our header text on mobile devices. 

We add the mixin (nested under the appropriate class) as an **include**, like so:

```SASS
.header-title {  
   font-size: 2rem;  
 
   @include for-phone-only {    
      font-size: 1rem; 
   }
}
```

When we compile our project, our @include will translate into:

```CSS
@media (max-width: 599px) {
   font-size: 1rem;
}
```

We now have the ability to easily insert our media queries wherever we like throughout our projects! 

Additionally, we won’t need to memorize our breakpoints, as we have them pre-defined. If we need to alter them, we can simply edit the mixins.


## Another way to setup our mixins

If you want to take it a step further, you could use conditionals to setup your mixins. 

You create just one ```@mixin``` block and set the parameters to be passed in — which we use to select our breakpoints, like so:

```SASS
@mixin for-size($size) {
  @if $size == phone-only {
    @media (max-width: 599px) { @content; }
  } @else if $size == tablet-portrait-up {
    @media (min-width: 600px) { @content; }
  } @else if $size == tablet-landscape-up {
    @media (min-width: 900px) { @content; }
  } @else if $size == desktop-up {
    @media (min-width: 1200px) { @content; }
  } @else if $size == big-desktop-up {
    @media (min-width: 1800px) { @content; }
  }
}
```

Then, to use our mixins in this manner, we’d select it like so:


```SASS
.header-title {  
   font-size: 2rem;  
 
   @include for-size(phone-only) {    
      font-size: 1rem; 
   }
}
```

It’s that simple! 

Writing media queries doesn’t need to be a headache, and by using SASS mixins, we have one centralized location in which to manage our media queries.


Handling the responsivity of our projects just got a whole lot easier!

That’s it! Congratulations for completing the course! You’re now equipped with all the knowledge and tools required to implement SASS effectively, on any or all of your future projects.

Keep that momentum going & use it on the next one!

*-* Tim



![](/api/collection/5200180308606976/5033336129978368/page/6460994365685760/image/6738507235065856)

When building websites and apps, we’ll often use media queries to help ensure our layouts’ responsivity. This way, they can adapt to suit the multitudes of devices accessing them, as we need to ensure all of our users are catered for when engaging with our products.


# CSS Media Queries
If you have experience with CSS, you'll likely know that a media query is a CSS3 module which allows content to render and adapt to conditions. Such as screen resolution, for example:

```CSS
@media (max-width: 599px) {
 font-size: 1rem;
}
```

Here, we’ve set the font size to ```1rem``` when the viewport size is **<=** ```599px```.

This is simple enough, and of course we’ll need multiple media queries to have a fully responsive site. 

However, inevitably, the time will come where we’ll need to edit the rules for the actual breakpoints, and searching through all of your code to change every line affected by a rule change is far from ideal. There has to be a better way!


Modern layout specifications have improved greatly over the past few years, [Grid](https://developer.mozilla.org/en-US/docs/Glossary/Grid) and [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) are responsive by default. This helps us to cut down on the amount of media queries required in our projects & makes for cleaner code. 

However, media queries still have a place in modern web development. And as our projects grow bigger, we need a better way of managing them. 

Enter SASS mixins!

# Mixins
As we now know, SASS mixins give us the ability to create reusable chunks of code — they reduce repetition, promote dry code and allow for ease of maintenance.

So writing media queries as mixins to inject into your stylesheets, wherever they’re required makes a whole lot of sense!

Let's now take a look at an example.


# Setting up your mixins

```SASS
@mixin for-phone-only {
  @media (max-width: 599px) { @content; }
}
@mixin for-tablet-portrait-up {
  @media (min-width: 600px) { @content; }
}
@mixin for-tablet-landscape-up {
  @media (min-width: 900px) { @content; }
}
@mixin for-desktop-up {
  @media (min-width: 1200px) { @content; }
}
@mixin for-big-desktop-up {
  @media (min-width: 1800px) { @content; }
}
```

Here, we’ve written up 5 common breakpoints into ```@mixin``` blocks. 

The ```@content``` syntax is a directive of SASS which allows for the insertion of content later on, as you likely won’t be writing all of your queries at once.

# Using a mixin

Say we want to use a mixin to reduce the font size of our header text on mobile devices. 

We add the mixin (nested under the appropriate class) as an **include**, like so:

```SASS
.header-title {  
   font-size: 2rem;  
 
   @include for-phone-only {    
      font-size: 1rem; 
   }
}
```

When we compile our project, our @include will translate into:

```CSS
@media (max-width: 599px) {
   font-size: 1rem;
}
```

We now have the ability to easily insert our media queries wherever we like throughout our projects! 

Additionally, we won’t need to memorize our breakpoints, as we have them pre-defined. If we need to alter them, we can simply edit the mixins.


# Another way to setup our mixins

If you want to take it a step further, you could use conditionals to setup your mixins. 

You create just one ```@mixin``` block and set the parameters to be passed in — which we use to select our breakpoints, like so:

```SASS
@mixin for-size($size) {
  @if $size == phone-only {
    @media (max-width: 599px) { @content; }
  } @else if $size == tablet-portrait-up {
    @media (min-width: 600px) { @content; }
  } @else if $size == tablet-landscape-up {
    @media (min-width: 900px) { @content; }
  } @else if $size == desktop-up {
    @media (min-width: 1200px) { @content; }
  } @else if $size == big-desktop-up {
    @media (min-width: 1800px) { @content; }
  }
}
```

Then, to use our mixins in this manner, we’d select it like so:


```SASS
.header-title {  
   font-size: 2rem;  
 
   @include for-size(phone-only) {    
      font-size: 1rem; 
   }
}
```

It’s that simple! 

Writing media queries doesn’t need to be a headache, and by using SASS mixins, we have one centralized location in which to manage our media queries.


Handling the responsivity of our projects just got a whole lot easier!

That’s it! Congratulations for completing the course! You’re now equipped with all the knowledge and tools required to implement SASS effectively, on any or all of your future projects.

Keep that momentum going & use it on the next one!

*-* Tim

In this lesson, we'll learn how to use SASS Mixins to make managing Media Queries a breeze.

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

How to setup Media Queries with SASS Mixins

CSS Media Queries #