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

by

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).

More Related Contents:

  1. Proper SCSS Asset Structure in Rails
  2. What’s the difference between SCSS and Sass?
  3. How to create color shades using CSS variables similar to darken() of Sass?
  4. Angular-cli from css to scss
  5. SASS: randomly pick background-image from a list
  6. Full-screen responsive background image
  7. Is there a SASS.js? Something like LESS.js?
  8. Sass Invalid CSS Error: “expected expression”
  9. Modify twitter bootstrap navbar
  10. Dynamic Sass Variables
  11. Ampersand (&) at the end, and part of, a selector in SASS
  12. Customize Bootstrap 4’s grid-system Breakpoints
  13. Have a variable in images path in Sass?
  14. Next.js Global CSS cannot be imported from files other than your Custom
  15. How to compile or convert sass / scss to css with node-sass (no Ruby)?
  16. CSS-Only Sticky Table Headers In Chrome
  17. SCSS extend a nested selector and override the nested rulesets
  18. Sass @each with multiple variables
  19. SASS indented syntax on multiple lines?
  20. Placeholder Mixin SCSS/CSS
  21. Why put in front of the file name “_” or “_” in scss/css?
  22. Does LESS have an “extend” feature?
  23. How to control number of items per row using media queries in Flexbox?
  24. Text Stroke (-webkit-text-stroke) css Problem
  25. Creating CSS3 Circles connected by lines
  26. How to properly introduce a light/dark mode in Bootstrap?
  27. Sass and rounding down numbers. Can this be configured?
  28. SASS calculate HSL Difference between 2 colours
  29. how to watch changes in whole directory/folder containing many sass files
  30. SASS CSS: Target Parent Class from Child

Leave a Comment