CODEWITHSUNDEEP
javascriptcssstylus
Sudarshan
Sudarshan

Reputation: 171

use mixins as class names in stylus

I'm a beginner to stylus and am working on a project with vue to create a small component library. I wanted to know if there was a way to use mixins as class names to achieve the following:

<style lang="stylus"> // this is where the stylus code is written.
bgColor (argument)
  background-color: argument
</style>

Then I would use this in the HTML template as:

<div class="bgColor(ff0000)"></div>

What I'm basically trying to achieve is a simple way to mimic atomizer (https://acss.io/guides/atomizer.html) using stylus.

I'm also open to any other way to achieve this.

Thanks in advance!

Upvotes: 1

Views: 328

Answers (1)

VitorLuizC
VitorLuizC

Reputation: 354

Stylus is a pre-processor language, even on Vue it isn't dynamic after compiling.

But you can archieve that by generating every color option as a class.

<style lang="stylus">
colors = ( ff0000, ff00ff ) // color collection
for color in colors
  .bgColor\({color}\)
    background-color unquote('#' + color)
</style>

Upvotes: 1

Related Questions