question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Dynamic variables and mixins

See original GitHub issue

Dynamic extends work fine. The following works as expected :

%#{$component} {
     // do something
}

Dynamic mixins and variables don’t seem to work, though. The following all give an error :

@mixin #{$component} {
     // do something
}
$var1 : parametername;
$$var1 : 5;
$var1 : parametername;
$#{$var1} : 5

Dynamic extends, mixins and variables increase the meta-programming capabilities of the language significantly. For that reason, I’m most definitely looking forward to the addition of dynamic mixins and/or variables to use them in the meta-framework I’m building.

Are these features planned for a future release? If not, is there a technical reason for that? Or is there maybe a technique you can recommend to achieve the same effect?

Issue Analytics

  • State:closed
  • Created 10 years ago
  • Reactions:10
  • Comments:19

github_iconTop GitHub Comments

3reactions
jslegerscommented, Jul 21, 2013

I’m currently doing this :


// Definitions
@mixin setComponent($placeholder) {
  // Do stuff
  %#{$placeholder} {
      @content;
  }
}

@mixin getComponent($placeholder) {
  // Do stuff
  @extend %#{$placeholder};
}

// Example use
@include setComponent(table-cell) {
    padding:4px;
    margin:4px;
}

td {
    @include getComponent(table-cell);
}

th {
    @include getComponent(table-cell);
}
// Output

td, th {
  padding: 4px;
  margin: 4px;
}

Basicly, I’m looking for ways to achieve the following :

  • support mixins as an alternative implementation for ‘setComponent’ and ‘getComponent’ dynamicly, based on the value of a global variable $extendComponents
  • test whether or not a certain component has already been defined, to avoid duplication. This should work for mixins in Sass 3.3, but I don’t think an implementation exists for placeholders yet.

Both this and https://github.com/nex3/sass/issues/336 seem essential to allow these features and other features I have in mind for the meta-framework I’m building.

0reactions
fuwaraidocommented, Oct 16, 2019

I think modifying SASS syntax is not appropriate solution for these kind of things…now I’m using jinja template engine to generate SASS codes and it works so so fine. If SASS needs meta-programming abilities, implementing a good macro language on top of current syntax is the way to go!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Creating or referencing variables dynamically in Sass
This is actually possible to do using SASS maps instead of variables. Here is a quick example: Referencing dynamically:
Read more >
Mixins and dynamic variables. (Website From scratch pt 2)
In this video I demonstrate a use for mixins to provide generic functionality for working ... Common Lisp: Mixins and dynamic variables.
Read more >
Create dynamic variables using loop in Less - Webkul Blog
So when mixin is called there is a condition in it which checks the value of @i is greater than 0 or not....
Read more >
The dynamic-mixins Reference Manual - Quickref
The dynamic-mixins Reference Manual, version 0.0. ... 5.2.1 Special variables; 5.2.2 Ordinary functions; 5.2.3 Structures. Appendix A Indexes.
Read more >
Build Truly Dynamic Theme with CSS Variables - Medium
SCSS is compiled to CSS during compile time, and SCSS variables are replaced with resolved value during compile time, which means there is...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found