Parent Wrapper Classes in Sass

  • SCSS
  • Sass
  • CSS

I ran into a small head-scratcher of a problem the other day when I was migrating an old project's Sass stylesheets to use @use and @forward instead of @import. I had a stylesheet that used @import statements inside of a class:

.custom-class {  @import "partials/spacing";  @import "partials/typography";}

This sort of thing worked using @import statements, because those could be thrown just about anywhere in a Sass project, but it won't work with @use because @use statements pretty much have to be at the top-level of the Sass file they are called in. I'll walk through what the solution is below, but first let's get into a little bit of a contrived example project space to demonstrate the issue.

Example project setup

We'll start with our entry point file, styles/styles.scss:

/* styles/styles.scss */.custom-class {  @import "partials/spacing";  @import "partials/typography";}

We saw this above. It's a somewhat contrived example, but not very far off from what I was actually working with. It loads two partial files.

First, styles/partials/_spacing.scss:

/* styles/partials/_spacing.scss */@use "../functions/pxToRem";
$size--100: 2px;$size--200: 4px;$size--300: 8px;
$space-map: (  0: 0,  100: pxToRem.pxToRem($size--100),  200: pxToRem.pxToRem($size--200),  300: pxToRem.pxToRem($size--300),) !default;
@function Space($value) {  @return map.get($space-map, $value);}
@each $index, $size in $space-map {  .margin-#{$index} {    margin: #{$size};  }}

Second, styles/partials/_typography.scss:

/* styles/partials/_typography.scss */$font-size--100: 11px;$line-height--100: 1.7;$font-size--200: 13px;$line-height--200: 1.64;$font-size--300: 16px;$line-height--300: 1.5;$font-size--400: 18px;$line-height--400: 1.48;
$font-size-base: $font-size--400;
@mixin f100 {  font-size: $font-size--100;  line-height: $line-height--100;}
@mixin f200 {  font-size: $font-size--200;  line-height: $line-height--200;}
@mixin f300 {  font-size: $font-size--300;  line-height: $line-height--300;}
@mixin f400 {  font-size: $font-size--400;  line-height: $line-height--400;}
.f100 {  @include f100;}
.f200 {  @include f200;}
.f300 {  @include f300;}
.f400 {  @include f400;}

These two partials define some utility classes (ex. margin-200 or f400) that we want to ultimately compile within the custom-class class. If we run our compile command, we see that this works:

/* compiled css */.custom-styles .f100 {  font-size: 11px;  line-height: 1.7;}.custom-styles .f200 {  font-size: 13px;  line-height: 1.64;}.custom-styles .f300 {  font-size: 16px;  line-height: 1.5;}.custom-styles .f400 {  font-size: 18px;  line-height: 1.48;}.custom-styles .margin-0 {  margin: 0;}.custom-styles .margin-100 {  margin: 0.1111111111rem;}.custom-styles .margin-200 {  margin: 0.2222222222rem;}.custom-styles .margin-300 {  margin: 0.4444444444rem;}.custom-styles .f100 {  font-size: 11px;  line-height: 1.7;}.custom-styles .f200 {  font-size: 13px;  line-height: 1.64;}.custom-styles .f300 {  font-size: 16px;  line-height: 1.5;}.custom-styles .f400 {  font-size: 18px;  line-height: 1.48;}

The problem is that we get this warning when we run that compile step:

Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.
More info and automated migrator: https://sass-lang.com/d/import
  ╷3 │   @import "partials/typography";  │           ^^^^^^^^^^^^^^^^^^^^^  ╵    styles/styles.scss 3:11  root stylesheet

This should look familiar if you read my @use and @forward in Sass post. If you didn't and aren't sure what this warning means, please go back and read that post.

Use meta.load-css instead

So how do we fix it? Well we could try to swap @import for @use:

/* styles/styles.scss */.custom-class {  @use "partials/spacing";  @use "partials/typography";}

But we won't get very far. We get this error when we run the compile command:

Error: This at-rule is not allowed here.  ╷2 │   @use "partials/spacing";  │   ^^^^^^^^^^^^^^^^^^^^^^^  ╵  styles/styles.scss 2:3  root stylesheet

Instead, we have to use the sass:meta built-in module:

/* styles/styles.scss */@use "sass:meta";
.custom-class {  @include meta.load-css("partials/spacing");  @include meta.load-css("partials/typography");}

meta.load-css lets you import a Sass file inside of a selector, in this case from a relative path, and includes the CSS as the contents of a mixin, scoped to that parent selector.

With this change made, when I run the compile command, the compiled CSS is exactly what we want, and there are no deprecation warnings:

/* compiled css */.custom-class .f100 {  font-size: 11px;  line-height: 1.7;}.custom-class .f200 {  font-size: 13px;  line-height: 1.64;}.custom-class .f300 {  font-size: 16px;  line-height: 1.5;}.custom-class .f400 {  font-size: 18px;  line-height: 1.48;}.custom-class .margin-0 {  margin: 0;}.custom-class .margin-100 {  margin: 0.1111111111rem;}.custom-class .margin-200 {  margin: 0.2222222222rem;}.custom-class .margin-300 {  margin: 0.4444444444rem;}.custom-class .f100 {  font-size: 11px;  line-height: 1.7;}.custom-class .f200 {  font-size: 13px;  line-height: 1.64;}.custom-class .f300 {  font-size: 16px;  line-height: 1.5;}.custom-class .f400 {  font-size: 18px;  line-height: 1.48;}