Creating and Using Partials in SASS/SCSS

1. Introduction

In this tutorial, we will cover the basics of creating and using partials in SASS/SCSS. Partials are a great way to modularize your CSS and help keep things easier to maintain. You will learn how to break down styles into manageable chunks which can be imported into a main stylesheet.

By the end of this tutorial, you will be able to:

• Understand what SASS/SCSS partials are.
• Create SASS/SCSS partials.
• Import partials into your main stylesheet.

Prerequisites: Familiarity with CSS and basic understanding of SASS/SCSS.

2. Step-by-Step Guide

Partials in SASS are used to split CSS into smaller, more manageable components. A partial is simply a SASS file. The file name begins with an underscore. The underscore lets SASS know that the file is only a partial file and that it should not be generated into a CSS file.

Creating a Partial

To create a partial, simply create a new .scss file in your directory and make sure it starts with an underscore. For example, we might have a partial for our variables called _variables.scss.

// _variables.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

Importing a Partial

To use a partial, we use the @import directive. This will include the partial in the main .scss file.

// main.scss
@import 'variables';
body {
  font-family: $font-stack;
  color: $primary-color;
}

The above main.scss will compile into the following CSS:

body {
  font-family: Helvetica, sans-serif;
  color: #333;
}

3. Code Examples

Let's now look at a more complex example:

Example 1:

// _variables.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

// _base.scss
body {
  font-family: $font-stack;
  color: $primary-color;
}

// main.scss
@import 'variables';
@import 'base';

Here, _variables.scss contains our variables, _base.scss contains some base styles, and main.scss imports both files. The compiled CSS will be:

body {
  font-family: Helvetica, sans-serif;
  color: #333;
}

Example 2:

// _reset.scss
* {
  margin: 0;
  padding: 0;
}

// main.scss
@import 'reset';
body {
  font-family: Arial, sans-serif;
}

In this example, _reset.scss contains a simple CSS reset. main.scss imports the reset then defines some styles. The compiled CSS will be:

* {
  margin: 0;
  padding: 0;
}
body {
  font-family: Arial, sans-serif;
}

4. Summary

In this tutorial, we covered how to create and use SASS/SCSS partials. We learned how to split CSS into smaller, more manageable components using partials. We did this by creating new .scss files beginning with an underscore and then imported them into our main .scss file using the @import directive.

Next, you might want to learn about SASS mixins, which allow you to make groups of CSS declarations that you want to reuse throughout your site.

You can practice your knowledge on SASS partials on platforms like CodePen or by building a small project and splitting your CSS into partials.

5. Practice Exercises

1. Create a _variables.scss partial with 3 variables: $primary-color, $secondary-color, and $font-stack. Import it into a main.scss file and use the variables to style a body element.

2. Create a _reset.scss partial with a simple CSS reset. Import it into a main.scss file and define some styles for a body and h1 element.

3. Create a _base.scss partial with some base styles. Create a _layout.scss partial with some layout styles. Import both into a main.scss file.

Solutions:

// _variables.scss
$primary-color:   #333;
$secondary-color: #ccc;
$font-stack:      Arial, sans-serif;

// main.scss
@import 'variables';

body {
  font-family: $font-stack;
  color: $primary-color;
  background-color: $secondary-color;
}

// _reset.scss
* {
  margin: 0;
  padding: 0;
}

// main.scss
@import 'reset';

body {
  font-family: Arial, sans-serif;
}

h1 {
  color: blue;
}

// _base.scss
body {
  font-family: Arial, sans-serif;
}

// _layout.scss
.container {
  max-width: 960px;
  margin: 0 auto;
}

// main.scss
@import 'base';
@import 'layout';

Remember, it's always a good idea to practice and experiment with the code on your own. Happy coding!