How Can One Import Only Variables and Mixins from SASS Stylesheets

How can one import only variables and mixins from Sass stylesheets?

Imports are an all or nothing thing. Everything that's in the file is what you get. If you look through the source of Foundation, though, there are variables you can modify that will suppress emitting styles (eg. in buttons, setting $include-html-button-classes to false will disable the styles). This design pattern is Foundation specific, you cannot expect other libraries to be authored this way.

When you import foundation via @import "foundation", you're importing this file: https://github.com/zurb/foundation/blob/master/scss/foundation.scss. As you can see, it imports other files. You don't have to import this file if you don't need everything: just import the specific file you want (eg. @import 'foundation/components/side-nav' for only the side-nav file).

How to import a sass module containing variables from a different directory using @use?

I have a similar structure, but I use relative paths instead of absolute paths.

css
    style.css
sass
    abstracts
        _functions.scss
        _mixins.scss
    base
        _typography.scss
    utility
    ...
    style.scss

In style.scss I import the scss files from the different directories, e.g.

@use 'utility/padding';
@use 'utility/border';

To import scss files between to directories, I do the following in utility/_padding.scss:

@use '../abstracts/functions';

So the sass command is something like this:
sass sass\style.scss css\style.css.

SASS - use variables across multiple files

This question was asked a long time ago so I thought I'd post an updated answer.

You should now avoid using @import. Taken from the docs:

Sass will gradually phase it out over the next few years, and
eventually remove it from the language entirely. Prefer the @use rule
instead.

A full list of reasons can be found here

You should now use @use as shown below:

_variables.scss

$text-colour: #262626;

_otherFile.scss

@use 'variables'; // Path to _variables.scss Notice how we don't include the underscore or file extension

body {
  // namespace.$variable-name
  // namespace is just the last component of its URL without a file extension
  color: variables.$text-colour;
}

You can also create an alias for the namespace:

_otherFile.scss

@use 'variables' as v;

body {
  // alias.$variable-name
  color: v.$text-colour;
}

EDIT As pointed out by @und3rdg at the time of writing (November 2020) @use is currently only available for Dart Sass and not LibSass (now deprecated) or Ruby Sass. See https://sass-lang.com/documentation/at-rules/use for the latest compatibility

---

Related Topics