Support passing single @content block to multiple mixins
See original GitHub issueHere is what I mean:
@include roses-are-red,
@include violets-are-blue {
font-size: 14px;
}
I came up with this idea while working on styling for rich texts for my projects. I’ve needed same styles to be applied on each element like this:
.rich h2,
.rich_h2 {
font-size: 24px;
}
.rich p,
.rich_p {
margin-bottom: 12px;
}
so I can format things two ways, 1) using a wrapper:
.rich
%h2 Le heading
%p A kingdom for a horse!
- or targeting exact elements without affecting it’s siblings:
%h2.rich_h2
What I’ve did is a mixin to simplify writing selectors for it which works like this:
@include rich-selector(h1, h2, h3) {
line-height: 1.1;
}
// Outputs to:
// .rich h1, .rich h2, .rich h3, .rich_h1, .rich_h2, .rich_h3 {
// line-height: 1.1;
// }
What I’ve wanted to do is not to over-bloat includes with arguments, but have multiple includes on separate lines having the same block passed to them – as I’ve shown on the first code example.
Issue Analytics
- State:
- Created 10 years ago
- Reactions:20
- Comments:12 (1 by maintainers)
Top Results From Across the Web
How to pass multiple content blocks as arguments to a mixin?
You can't pass different content as arguments in SASS mixins. Below is example of what you can achieve using SASS.
Read more >SASS Passing Content Block to Mixin - Coding Ninjas
The Saas Mixin Directive is a way to reuse styles across the stylesheet. It can store multiple values to avoid writing repetitive codes....
Read more >mixin and @include - Sass
A mixin can declare that it takes a content block by including the @content at-rule in its body. The content block is passed...
Read more >How to Use Mixins in Sass and Pass Arguments – With Code ...
To put it simply, a mixin is a code block which allows you to write your styles in it and use it throughout...
Read more >How To Pass Multiple Content Blocks As Arguments To A Mixin
Content Blocks.Overview; Passing Arguments to Content Blocks.Indented Mixin Syntax.Mixins allow you to define styles that can be reused throughout your. Sass: ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@AvraamMavridis If you want more helpful responses you have to make more helpful posts. Try something like this next time: “Hey, I know this issue is closed, but I’m interested in building this feature or equivalent capabilities into an upcoming version of Sass. Here’s my use case for which I cannot find any way to address it in the current Sass feature set: <use case summary with code examples> If there’s a way to do this that I’m not aware of please let me know, otherwise, I’d like it if we could re-open this or start a new issue to address this capability. I’ve read through this issue and here’s the aspects that (I disagree with|(seem to be (unresolved|contentious))): <list of things> My take on these is the following: <correlated list of things>. Assuming we can agree on some features that are needed, I’d appreciate it if someone could point me to a few relevant places in code where I’d start looking to see where this feature would slot in and let me know the best way to get a patch in? I’m super excited to start helping bring what I think could be a really useful feature to the Sass community!”
You can accomplish this by passing a content block to other mixins. Example: