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.

Support passing single @content block to multiple mixins

See original GitHub issue

Here 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!
  1. 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:closed
  • Created 10 years ago
  • Reactions:20
  • Comments:12 (1 by maintainers)

github_iconTop GitHub Comments

36reactions
chriseppsteincommented, May 31, 2018

@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!”

20reactions
chriseppsteincommented, Jan 6, 2014

You can accomplish this by passing a content block to other mixins. Example:

@mixin  combinator($mixin1-arg1, $mixin1-arg2, $mixin2-arg1, $mixin2-arg2) {
  @include mixin1($mixin1-arg1, $mixin1-arg2) { @content }
  @include mixin2($mixin2-arg1, $mixin2-arg2) { @content }
}
Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

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