Why does this SCSS/SASS Mixin prevent unnecessary imports?

Question

We have multiple .scss files which we compile via Grunt (with Compass and Ruby) and then minify into one styles.css file. This file is being used on all sites.

<link rel="stylesheet" href="styles.css">

styles.scss

@charset "UTF-8";

// Libs and settings
@import "compass";
@import "lib/foundation/_functions.scss";
@import "global/base/hse-init.scss";
@import "lib/swiper/swiper.scss";
@import "global/hse-colors.scss";
@import "global/hse-settings.scss";
@import "lib/foundation/foundation.scss";

// All other custom styles
@import "global/base/hse-alert.scss";
@import "global/base/hse-typography.scss";
// lots more imports here...

For 1 special site called "catalog" we'd like to add a dedicated stylesheet called catalog.css .

<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="catalog.css">

catalog.scss

@charset "UTF-8";

// Libs and settings
@import "compass";
@import "lib/foundation/_functions.scss";
@import "global/hse-colors.scss";
@import "global/hse-settings.scss";
@import "lib/foundation/_settings.scss";
@import "global/base/hse-iconfont-catalog.scss";

// custom css
@import "modules/content/catalog/hse-catalog-products.scss";
@import "modules/content/catalog/hse-filter.scss";
@import "modules/content/catalog/hse-large-filter.scss";
@import "modules/content/catalog/hse-sidebare.scss";
@import "modules/content/catalog/hse-atf-section.scss";
@import "modules/content/catalog/hse-brand-banner.scss";
@import "modules/content/catalog/hse-campaigns.scss";

As you can see, in catalog.scss we require the same settings and libs as in styles.scss. Unfortunately, this leads to code duplication of all libs and settings within catalog.css which we want to avoid. Thus, one of the devs added a mixin:

_mixins.scss

@function grid-calc($colNumber, $totalColumns) {
    $result: percentage($colNumber / $totalColumns);

    @if $result == 0% {
        $result: 0;
    }

    @return $result;
}

@mixin centerer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@mixin grid-column($columns: false, $last-column: false, $center: false, $offset: false, $push: false, $pull: false, $collapse: false, $float: true, $position: false) {
    // If positioned for default .column, include relative position
    // push and pull require position set
    @if $position or $push or $pull {
        position: relative;
    }

    // If collapsed, get rid of gutter padding
    @if $collapse {
        padding-left: 0;
        padding-right: 0;
    }
    @else if $collapse == false {
        padding-left: $column-gutter / 2;
        padding-right: $column-gutter / 2;
    }

    // If a column number is given, calculate width
    @if $columns {
        width: grid-calc($columns, $total-columns);

        // If last column, float naturally instead of to the right
        @if $last-column {
            float: $opposite-direction;
        }
    }

    // Source Ordering, adds left/right depending on which you use.
    @if $push {
        #{$default-float}: grid-calc($push, $total-columns);
        #{$opposite-direction}: auto;
    }

    @if $pull {
        #{$opposite-direction}: grid-calc($pull, $total-columns);
        #{$default-float}: auto;
    }

    @if $float and $last-column == false {
        @if $float == left or $float == true {
            float: $default-float;
        }
        @else if $float == right {
            float: $opposite-direction;
        }
        @else {
            float: none;
        }
    }

    // If centered, get rid of float and add appropriate margins
    @if $center {
        margin-#{$default-float}: auto;
        margin-#{$opposite-direction}: auto;
        float: none;
    }

    // If offset, calculate appropriate margins
    @if $offset {
        margin-#{$default-float}: grid-calc($offset, $total-columns) !important;
    }
}

This mixin is being imported to styles.scss as well as catalog.scss between libs/settings and our custom code:

In styles.scss:

@charset "UTF-8";

// Libs and settings
@import "compass";
@import "lib/foundation/_functions.scss";
@import "global/base/hse-init.scss";
@import "lib/swiper/swiper.scss";
@import "global/hse-colors.scss";
@import "global/hse-settings.scss";
@import "lib/foundation/foundation.scss";

@import "_mixins.scss"; // <-- HERE

// All other custom styles
@import "global/base/hse-alert.scss";
@import "global/base/hse-typography.scss";
// lots more imports here...

In catalog.scss:

@charset "UTF-8";

// Libs and settings
@import "compass";
@import "lib/foundation/_functions.scss";
@import "global/hse-colors.scss";
@import "global/hse-settings.scss";
@import "lib/foundation/_settings.scss";
@import "global/base/hse-iconfont-catalog.scss";

@import "_mixins.scss"; // <-- HERE

// custom css
@import "modules/content/catalog/hse-catalog-products.scss";
@import "modules/content/catalog/hse-filter.scss";
@import "modules/content/catalog/hse-large-filter.scss";
@import "modules/content/catalog/hse-sidebare.scss";
@import "modules/content/catalog/hse-atf-section.scss";
@import "modules/content/catalog/hse-brand-banner.scss";
@import "modules/content/catalog/hse-campaigns.scss";

For some magic reason this seems to fix the problem. When I look into the generated catalog.css file, all lib and settings css is not there.

He tried to explain to me why but I didn't understand it. Can someone tell me in simple words why using this mixin removes the imports from catalog.scss ?

Answer 1

I'm not sure that the mixin file is the one responsible for the difference, The mixin file simply adds mixins, like a grid class mixin, thus, it has no significance over the library output.

Now I believe the library files are foundation.

styles.scss has one additional line that the catalogue.scss doesn't have;

@import "lib/foundation/foundation.scss";

This is most likely importing or more actually, activating the foundation library, and this is the file responsible for the output of the the library and hence, the difference in the two css files.