How to define a dynamic mixin or function name in SASS?

by

Variable interpolation in @mixins does not appear to be supported currently.

The SASS documentation calls this #{} interpolation and describes it like this:

Interpolation: #{}

You can also use SassScript variables in selectors and property names using #{} interpolation syntax:

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

Per the documentation, interpolation of variable names only appears to be supported for selectors and property names, and not for @mixins. If you’d like that feature, you may want to file an Issue for it, although this one may already be tracking what you’re describing.

Edit:
Are you sure you need to use a @mixin to accomplish the kind of styling you’re talking about? Could you just use a selector with interpolation? For example, would this work:

$event-icons: fair, concert, art-show, conference, dance-show, film, party, festival, theatre, launch
@for $i from 1 to length($event-icons)
  $event-icon: nth($event-icons, $i)
  .event-icon-#{$event-icon}
    background-position: -($event-icon-width * $i) 0

More Related Contents:

  1. CSS property as SASS mixin value [duplicate]
  2. why i can’t save scss file of template?
  3. CSS filter:invert not working with background-color
  4. Overlapping/overlaying multiple inline images
  5. Attaching a SCSS to HTML docs [closed]
  6. Why doesn’t percentage padding / margin work on flex items in Firefox and Edge?
  7. How to modify the fill color of an SVG image when being served as background image?
  8. Make flex items take content width, not width of parent container
  9. Is element block level or inline level?
  10. Style input type file? [duplicate]
  11. Maintain the aspect ratio of a div with CSS
  12. How do I give text or an image a transparent background using CSS?
  13. How to display scroll bar onto a html table
  14. How to apply CSS page-break to print a table with lots of rows?
  15. How to determine height of content-box of a block and inline element
  16. issue with CSS media queries(scrollbar)
  17. CSS: Workaround to backdrop-filter?
  18. Inspect webkit-input-placeholder with developer tools
  19. How to create a curved speech bubble?
  20. Make an image width 100% of parent div, but not bigger than its own width
  21. How to center cards in bootstrap 4?
  22. Create line numbers on pre with CSS only
  23. HTML Div border not showing
  24. How do I assign multiple classes to one HTML element? [closed]
  25. How to center horizontally and vertically?
  26. Why is translateY(-50%) needed to center an element which is at top: 50%?
  27. Transparent scrollbar with css
  28. Make A List Item Clickable (HTML/CSS)
  29. Change image on hover
  30. Why does a border increase the element’s width?

Leave a Comment