Is there a way to specifically import only variables and mixins from Sass stylesheets?

Question

Is there a way to specifically import only variables and mixins from Sass stylesheets?

Using the Zurb Foundation 4 (S)CSS framework has presented a challenge with massively duplicated styles. Each file that I import 'foundation' into brings along all of Foundation's styles, resulting in redundant declarations for body, .row, .button, and other elements. This not only prolongs SCSS compile times but also clutters the web developer console in Chrome with repeated styles from Zurb.

To address this issue, I've introduced a globals.scss file containing overrideable variables used by Foundation. This file is essentially a copy-paste of foundation_and_overrides.scss and imported before any reference to Foundation mixins. By importing just the globals.scss file, duplication is eliminated in files that do not utilize Foundation mixins.

However, the problem persists in files that do make use of Foundation mixins. Is there a way to selectively import only the mixins from an SCSS file without pulling in the concrete Foundation styles?

css ruby-on-rails sass zurb-foundation modularity

Answer 1

Answer №1

Imports in coding can be a bit tricky - it's usually an all or nothing deal. Whatever is in the imported file is what you'll end up with. However, if you take a close look at the source code of Foundation, you'll find some variables that allow you to tweak things and prevent certain styles from being included (for example, in the buttons section, by setting $include-html-button-classes to false, you can turn off those styles). Keep in mind, though, this customization method is unique to Foundation and may not apply to other libraries.

When importing Foundation using @import "foundation", you're essentially bringing in this main file: https://github.com/zurb/foundation/blob/master/scss/foundation.scss. This file, in turn, imports other files. If you don't need everything that Foundation offers, you can choose to import only specific files that you require (e.g.,

@import 'foundation/components/side-nav'

for just the side-navigation component).

Answer 2

Imports in coding can be a bit tricky - it's usually an all or nothing deal. Whatever is in the imported file is what you'll end up with. However, if you take a close look at the source code of Foundation, you'll find some variables that allow you to tweak things and prevent certain styles from being included (for example, in the buttons section, by setting $include-html-button-classes to false, you can turn off those styles). Keep in mind, though, this customization method is unique to Foundation and may not apply to other libraries.

When importing Foundation using @import "foundation", you're essentially bringing in this main file: https://github.com/zurb/foundation/blob/master/scss/foundation.scss. This file, in turn, imports other files. If you don't need everything that Foundation offers, you can choose to import only specific files that you require (e.g.,

@import 'foundation/components/side-nav'

for just the side-navigation component).

Answer 3

Answer №2

I encountered a similar situation where I needed to access a variable from another file without importing all the CSS.

With the `@use` keyword in newer versions of Sass, you can ensure that CSS is only emitted once.

However, there are some drawbacks to this approach:

Only "Dart Sass" currently supports compiling it (at least, at the time of writing).
`@use` rules need to be written before any other rules.

Replacing `@import` with `@use` requires adding a scope prefix, like so:

@use '../my-module';

body {
    background-color: my-module.$my-variable;
}

Warning: The `@extends` keyword(s) cannot have the `my-module.` prefix, as extensions are not scoped at all (at least, at the time of writing).

Answer 4

I encountered a similar situation where I needed to access a variable from another file without importing all the CSS.

With the `@use` keyword in newer versions of Sass, you can ensure that CSS is only emitted once.

However, there are some drawbacks to this approach:

Only "Dart Sass" currently supports compiling it (at least, at the time of writing).
`@use` rules need to be written before any other rules.

Replacing `@import` with `@use` requires adding a scope prefix, like so:

@use '../my-module';

body {
    background-color: my-module.$my-variable;
}

Warning: The `@extends` keyword(s) cannot have the `my-module.` prefix, as extensions are not scoped at all (at least, at the time of writing).

Is there a way to specifically import only variables and mixins from Sass stylesheets?

Answer №1

Answer №2

Similar questions

Why isn't this code for hiding the animation and displaying it not functioning properly?

Creating PDFs using Puppeteer in the presence of `link` tags

Ensuring consistent width for two divs using CSS

Encountering a jQuery error while trying to utilize the $window.load

Changing the width of an SVG path from 0 to 100% using CSS

Unable to display image between two inline-table divs while using Bootstrap

I encountered an issue while iterating through Object HTMLDivElement and applying ChileNode style z-index, resulting in an undefined output in both Firefox and Chrome browsers

Split the output into two separate columns in a cshtml file using a foreach

Altering the appearance of an Angular component in real-time by applying various CSS style sheets

What to do when CSS Overflow doesn't work as expected?

What is the best way to expand my navigation bar to fill the entire width of my div?

Assigning the Style property to an element using a string that includes HTML tags

How does the app.scss file detect that the ~foo alias corresponds to the foo directory located within the node_modules

What is the best way to integrate a ttf custom font into my Rails application?

Using bootstrap's center-block class, you can easily center

Make sure the div is always positioned above everything, including any built-in pop-up windows

A specific div remains in place as the user scrolls

Using jQuery to change the `class` of the parent `div` based on the length of a `p`

Sending data from one page to another using Ajax request

Using jQuery to store the name of a Div in a variable and subsequently invoking it in a function