CODEWITHSUNDEEP
cssstylus
zhekaus
zhekaus

Reputation: 3194

Is it possible to pass a class as parameter to a mixin in Stylus?

I’m trying to reduce some Stylus code using its mixins. In some particular cases I need a class as a parameter. Let’s we’ve got:

.parent:hover .child
   color: lighten(red, -25%)

.child
   color red

I’d like to have a mixin which gets both classes as parameters.

I can’t find a way from the docs. ((

Upvotes: 3

Views: 761

Answers (1)

webdevdani
webdevdani

Reputation: 1102

You can achieve this with interpolation: http://stylus-lang.com/docs/interpolation.html

Here's an example codepen: https://codepen.io/webdevdani/pen/POVLpr

Code example from codepen:

/* Stylus */

.box {
	height: 2rem;
	width: @height;
	background-color: blue;
	padding: 1rem;
}

.red-box {
	background-color: red;
}

$blockColor(parentClass, childClass) {
	{parentClass} {
		background-color: green;
		
		{childClass} {
			background-color: yellow;
		}
	}
}	
		
$blockColor('.box', '.red-box');
<div class="box">
	<div class="box red-box"></div>
</div>

Upvotes: 4

Related Questions