Partials and Modules in Sass

Sass offers a way to split your CSS into smaller pieces that you can import into the main stylesheet. These smaller files are called "partials." They allow you to create modules that can be reused throughout the entire project.

Partials

A partial in Sass is a file with a small fragment of CSS code. The naming rules for partials in Sass are simple - their names should start with an underscore _. For example, _buttons.scss.

The underscore tells Sass that the file is a partial, not a main CSS file that should be compiled into a .css file. Partials are used for importing into other Sass files.

Importing

To import a partial, we use the @use directive. For example, if we have a partial _buttons.scss, we can import it into our main stylesheet:

1// In the main.scss file
2@use 'buttons';

Remember that when importing a file, you don't need to add the underscore _ or the .scss extension. Sass is smart enough to know what you're looking for.

After importing a partial, all styles defined inside it are available in the file you imported it into.

Modules

Modules are simply Sass files that export styles, variables, mixins, functions, etc. A module can be any Sass file, not just a partial.

To import a module, we also use the @use directive. For example, if we have a module _variables.scss that exports several variables, we can import it into our main stylesheet:

1// In the main.scss file
2@use 'variables';

Then we can use those variables in our main stylesheet by referencing them through the module name:

1body {
2  color: variables.$text-color;
3  background-color: variables.$bg-color;
4}

Splitting code into smaller, manageable pieces is a key aspect of maintaining clean and organized CSS code. Thanks to partials and modules, Sass makes this much easier.

Exercise: Creating a Project with Sass Partials and Modules

Exercise Goals

1. Create a Sass project structure using partials and modules.
2. Organize styles into modules such as variables, mixins, and component styles.
3. Import and use modules in the main stylesheet.

Step 1: File Structure

Create the following file structure for the project:

1project/
2|-- scss/
3|   |-- _variables.scss
4|   |-- _mixins.scss
5|   |-- _buttons.scss
6|   |-- _header.scss
7|   |-- main.scss
8|-- index.html

Step 2: Defining Variables and Mixins

In the _variables.scss file, define some variables:

1// _variables.scss
2$text-color: #333;
3$bg-color: #f9f9f9;
4$primary-color: #007bff;
5$padding: 20px;

In the _mixins.scss file, define some useful mixins:

1// _mixins.scss
2@mixin center-flex {
3  display: flex;
4  justify-content: center;
5  align-items: center;
6}

Step 3: Styling Components

In the _buttons.scss file, define styles for buttons:

1// _buttons.scss
2@use 'variables';
3
4.button {
5  background-color: variables.$primary-color;
6  color: #fff;
7  padding: variables.$padding;
8  border: none;
9  border-radius: 5px;
10
11  &:hover {
12    background-color: darken(variables.$primary-color, 10%);
13  }
14}

In the _header.scss file, define styles for the header:

1// _header.scss
2@use 'variables';
3@use 'mixins';
4
5.header {
6  background-color: variables.$primary-color;
7  color: #fff;
8  padding: variables.$padding;
9
10  .header-content {
11    @include mixins.center-flex;
12    flex-direction: column;
13  }
14}

Step 4: Importing Partials and Modules

In the main.scss file, import all partials and modules:

1// main.scss
2@use 'variables';
3@use 'mixins';
4@use 'buttons';
5@use 'header';

Step 5: Compiling Sass

Use a Sass compilation tool (e.g., node-sass, Dart Sass, or your editor's preprocessor) to generate the CSS file (main.css) from the Sass file (main.scss).

Step 6: HTML

Create an index.html file and add the following structure:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Sass Project</title>
7  <link rel="stylesheet" href="css/main.css">
8</head>
9<body>
10  <header class="header">
11    <div class="header-content">
12      <h1>Welcome to our website</h1>
13      <button class="button">Click me</button>
14    </div>
15  </header>
16</body>
17</html>

Exercise

1. Adding New Components: Add a new partial _footer.scss and define styles for the footer. Import it into main.scss and add the corresponding HTML to index.html.
2. Expanding the Mixin: Expand the center-flex mixin to accept optional arguments for justify-content and align-items.
3. Using New Variables: Add new variables to _variables.scss, e.g., for accent colors and margins, and use them in other styles.
4. Code Refactoring: Reorganize styles in partial files to be more modular and easier to manage.

This exercise will allow you to fully leverage the power of partials and modules in Sass, creating an organized and scalable project.

1<!DOCTYPE html>
2<html lang="en">
3<head><title>Checkboxes</title></head>
4<body style="background:#d4a574;font-family:serif;padding:20px;color:#3d2914">
5<h1>Checkboxes</h1>
6<input type="checkbox"> Gold <input type="checkbox"> Gems
7</body>
8</html>