@import in @if statement in Sass

by

It’s one of those things that’s just not allowed. The only thing you can do is turn those imports into mixins (import the file outside the @if and call the mixin where appropriate).

Clarification:

_partial.scss

@mixin partial {
    .test { color: red }
    // other styles here
}

styles.scss

@import "partial";
@if $someval == true {
    @include partial;
}

More Related Contents:

  1. Next.js Global CSS cannot be imported from files other than your Custom
  2. Why put in front of the file name “_” or “_” in scss/css?
  3. What’s the difference between SCSS and Sass?
  4. Difference between @import and link in CSS
  5. How to create color shades using CSS variables similar to darken() of Sass?
  6. SASS: randomly pick background-image from a list
  7. Is there a SASS.js? Something like LESS.js?
  8. Sass Invalid CSS Error: “expected expression”
  9. @import vs link
  10. Dynamic Sass Variables
  11. Ampersand (&) at the end, and part of, a selector in SASS
  12. import .css file into .less file
  13. Customize Bootstrap 4’s grid-system Breakpoints
  14. How can one import only variables and mixins from Sass stylesheets?
  15. Have a variable in images path in Sass?
  16. How to compile or convert sass / scss to css with node-sass (no Ruby)?
  17. CSS-Only Sticky Table Headers In Chrome
  18. SCSS extend a nested selector and override the nested rulesets
  19. Sass @each with multiple variables
  20. SASS indented syntax on multiple lines?
  21. Placeholder Mixin SCSS/CSS
  22. CSS property as SASS mixin value [duplicate]
  23. How to define a dynamic mixin or function name in SASS?
  24. Does LESS have an “extend” feature?
  25. How to control number of items per row using media queries in Flexbox?
  26. Text Stroke (-webkit-text-stroke) css Problem
  27. Less and Bootstrap: how to use a span3 (or spanX [any number]) class as a mixin?
  28. SASS for loop updating hsla lightness returns error $lightness: “96.77419” is not a number for `hsla’
  29. How to properly introduce a light/dark mode in Bootstrap?
  30. How to combine and use multiple Next.js plugins

Leave a Comment