# Partials

To keep the file style.scss organized and maintainable, the Sass code herein is usually split into several partials, which we then import (in the correct order!) into style.scss

# Example 1E

We illustrate this concept using Example 1E, which contains the same Sass code as Example 1D, but now re-organised in different partials (within the folder scss)
- The file names of the partials start with an underscore (_variables.scss, _mixins.scss, ...), indicating that these files
  - are NOT compiled to CSS files (variables.css, mixins.css, ...)
  - are (meant to be) imported into another Sass file (style.scss)

# _variables.scss

Contains the declaration of the variables

$sasscolor: #cf649a;
$fontstack: Verdana, sans-serif;
$fontsize: 14px;
 
        Copied!

1
2
3

# _mixins.scss

Contains the mixin(s)

@mixin colorcombo($front: #151515, $back: #f1f1f1){
  color: $front;
  background-color: $back;
}
 
        Copied!

1
2
3
4

# _reboot.scss

Contains the (basic) layout of the page, apart from the styling of the links (see _links.scss below)

@use "sass:color";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: $fontsize;
}

body {
  font-family: $fontstack;
  line-height: 1.5;
  @include colorcombo; 
}

main, footer {
  padding: 0 1rem;
}

h1 {
  @include colorcombo($sasscolor, inherit);
}

h1, p, ul {
  margin-bottom: 1rem;
}

li {
  margin-left: 2rem;
}

footer {
  @include colorcombo(inherit, color.scale(color.invert($sasscolor), $lightness:75%));

  p {
    padding: 1rem 0;
  }
}
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

# _links.scss

Contains the layout of the links on the page

@use "sass:color";

a {
  font-weight: bold;
  text-decoration: none;
  @include colorcombo(color.scale($sasscolor, $lightness:-50%), inherit);

  &:focus {
    outline: 2px solid $sasscolor;
  }

  &:hover {
    text-decoration: underline;
  }
}
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

REMARK

Observe that in both the files _reboot.scss and _links.scss the statement @use "sass:color" is included (as in both files functions from the sass:color module are used)

# style.scss

All the partials are loaded into the main file style.scss (without underscore!) by using @import statements
- Notice that the nor the underscore, nor the extension (.scss) is included in these @import statements
- Obviously, the order of importing these partials is important!
  - For example, if you would import the partial _reboot.scss before the partial _variables.scss, this would throw a bunch of errors as you would try to use variables in _reboot.scss that are not defined yet

@import "variables";
@import "mixins";
@import "reboot";
@import "links";
 
        Copied!

1
2
3
4

TIP

It's considered to be good practice to
- have only @import statements (and no Sass code) in your main Sass file (style.scss)
- divide your Sass code into similar partials as the one used in this example, i.e., partials containing the variables (_variables.scss), mixins (_mixins.scss) and layout for the website (_reboot.scss and/or specific files for specific elements, e.g. _links.scss)

REMARK: @import vs @use

The Sass team discourages the use of the @import rule, as it will be fased out gradually. Instead, the recently introduced module system (opens new window) based on the @use rule will (also) become the future standard for loading partials.
- Video tip for the interested reader: Sass Module System Update 2020 | SCSS import Deprecation (opens new window)
Unfortunately, Bootstrap Sass (Bootstap's source/Sass code that we will study later on) still uses @import statements for loading its partials (as loading them with the @use module system does not yet work). Therefore, we decided to stick to the @import rule (for loading partials) for now.

# Source map

At compile time, our compiler by default builds a source map style.css.map and adds it to the dist/css folder:

source map file source map file code

This source mapping ensures that when you inspect the code of the web page (F12), you can see in which partial the basis for the CSS was laid. This makes debugging a lot easier.
- For example, if you right-click on the link in the footer and inspect it, you will see that the color from the partial _reboot.scss is overwritten in the partial _links.scss

inspection of link in footer