I'm moving from Sass to Stylus and I have lots of mixins where I pass in a code block which is accessible inside the mixin as @content
.
For example...
@mixin respond-min($width) {
// If we're outputting for a fixed media query set...
@if $fix-mqs {
// ...and if we should apply these rules...
@if $fix-mqs >= $width {
// ...output the content the user gave us.
@content;
}
}
@else {
// Otherwise, output it using a regular media query
@media all and (min-width: $width) {
@content;
}
}
}
@include respond-min($mq-group2) {
& {
border: 1px solid green;
}
}
I want to convert the above code into Stylus, but my main problem so far as been how I pass a code block into the mixin as Stylus doesn't appear to have that feature.
Is there an alternative solution?
Any help appreciated.
This become possible with the latest release of Stylus — 0.41.0, the code above could be written in Stylus like this:
respond-min($width)
// If we're outputting for a fixed media query set...
if $fix-mqs is defined
// ...and if we should apply these rules...
if $fix-mqs >= $width
// ...output the content the user gave us.
{block}
else
// Otherwise, output it using a regular media query
media = 'all and (min-width: %s)' % $width
@media media
{block}
+respond-min($mq-group2)
border: 1px solid green
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With