@Import in @If Statement in SASS

SCSS @if variable == value @import not possible?

Import directives may not be used within control directives or mixins. It is a feature discussed in sass GitHub, but never implemented and won't be by soon.

You should just import your scss file directly without any condition.

You can find more information under the same question here.

How to create conditional import using sass?

If you want to handle this using Sass, you could proceed as follow:

html[dir='rtl'] {
  @import "node_modules/bootstrap-v4-rtl/scss/bootstrap-rtl";
}

html[dir='ltr'] {
  @import "node_modules/bootstrap/scss/bootstrap";
}

This method works but will generate an html pre-selector for each of your rules, which will have an impact on the weight of the file.

Conditionally import partials - Compass

In retrospect, the best solution you would probably use JavaScript to conditionally load in theme assets or modules.

Import path using variable SASS

At this moment it is not possible, check this GitHub issue logged against Sass in 2012 for more information.

The reasoning given there is as follows:

Allowing dynamic imports would completely break Sass's ability to quickly determine which files import which other files, and thus what needs re-compiling when.

That thread also includes a link to another issue which includes this 2018 comment that discusses future plans for dynamic dependencies:

I'm locking this issue for now because there's a lot of noise without
a lot of value being added. To summarize, this is the plan:

The new @use directive will provide the ability to import a file as a
mixin, so you can dynamically decide whether and where to include it.
This will bring Sass more in line with other languages that work well
without dynamic imports, since it means importing no longer has
unavoidable side-effects.

We will add a load() function as described above that will allow
stylesheets to load files at runtime based on variable values. This
will support the more complex use-cases where stylesheets need to be
loaded based on user input, while preserving the ability to statically
trace the import graph and the mixins and functions it defines.

Sass use variable value in @import

This is currently not possible, but some new features may be added to Sass in a near future.

You could achieve so by using conditionals to create the rules to match your imports. You could use @if for that (while we wait for a @switch statement to be implemented):

@mixin customImport($file) {
    @if $file == 'file-one' {
        @import 'file-one';
    } @else if $file == 'file-two' {
        @import 'file-two';
    }
}

Then later:

@include customImport('file-one');

SCSS: using @if to include only certain selectors on compilation

I solved this by wrapping unwanted content in the different components of the stylesheet, before compilation, as follows:

// $stylesheet-type: "basic";

$stylesheet-type: "home";
// $stylesheet-type: "contact";
// $stylesheet-type: "custom";

// < - - - - ONLY INCLUDED IN STYLE.CSS

@if $stylesheet-type == basic {


<!-- Content used only in style.css -->
}

// [END] < - - - - ONLY INCLUDED IN STYLE.CSS

// < - - - - ONLY INCLUDED IN HOME.CSS

@if $stylesheet-type == home {


<!-- Content used only in home.css -->

}

// [END] < - - - - ONLY INCLUDED IN HOME.CSS

< - - - - ONLY INCLUDED IN CONTACT.CSS

@if $stylesheet-type == contact {

 <!-- Content used only in contact.css -->

}

// [END] < - - - - ONLY INCLUDED IN CONTACT.CSS

This means an enormous gain in time when applying any layout changes to the site.

---

Related Topics