Dynamic class in Stylus

Question

Is it possible to retrieve a part of a class name in an element and pass as value to the CSS property using Stylus? Example

.font-word-spacing-light--1 {
  word-spacing: -0.1px !important
}
.font-letter-spacing-light--1 {
  letter-spacing: -0.1px !important
}
.align-left--16px {
  position relative
  left -16px
}

In this case, use in the element as follows

<h2 class="font-word-spacing-light--1 font-letter-spacing-light--1 align-left--16px">Elemento</h2>

In this case, I wondered if this is possible, as vuetify does something like this, I wondered if it is possible, there are for example the color classes

cor-vermelha /* cor de fundo vermelha */
cor-vermelha--text /* cor da fonte vermelha */

I read in the manual that there are Mixins, Variables and Functions I just did not understand right how to use and it makes possible what I mentioned

---

Let’s say something practical would look like this (I’m just exemplifying with some syntax)

<h2 class="cor-do-texto--ff00ff tamanho-do-texto--60">
  Título com cor #ff00ff e tamanho 60PX
</h2>

<style lang="stylus">
  .cor-do-texto--{%s}
    color #{%s} /* imprime color: #ff00ff */

  .tamanho-do-texto--{%s}
    text-size {%s}PX /* imprime text-size: 60px */
</style>

resolution if someone comes here with the same doubt

maxkw = 7680

width(n)
  width n !important

min-width(n)
  min-width n !important

max-width(n)
  max-width n !important

.width
  for r in 0..maxkw
    &-{r}
      width(1px * r)
  for r in 0..maxkw
    &-v-{r}
      width(1vw * r)
  for r in 0..maxkw
    &-per-{r}
      width(1% * r)

.min-width
  for r in 0..maxkw
    &-{r}
      min-width(1px * r)
  for r in 0..maxkw
    &-v-{r}
      min-width(1vw * r)
  for r in 0..maxkw
    &-per-{r}
      min-width(1% * r)

.max-width
  for r in 0..maxkw
    &-{r}
      max-width(1px * r)
  for r in 0..maxk
    &-v-{r}
      max-width(1vw * r)
  for r in 0..maxkw
    &-per-{r}
      max-width(1% * r)


maxkh = 4320

height(n)
  height n !important

min-height(n)
  min-height n !important

max-height(n)
  max-height n !important

.height
  for r in 0..maxkh
    &-{r}
      height(1px * r)
  for r in 0..maxkh
    &-v-{r}
      height(1vh * r)
  for r in 0..maxkh
    &-per-{r}
      height(1% * r)

.min-height
  for r in 0..maxkh
    &-{r}
      min-height(1px * r)
  for r in 0..maxkh
    &-v-{r}
      min-height(1vh * r)
  for r in 0..maxkh
    &-per-{r}
      min-height(1% * r)

.max-height
  for r in 0..maxkh
    &-{r}
      max-height(1px * r)
  for r in 0..maxkh
    &-v-{r}
      max-height(1vh * r)
  for r in 0..maxkh
    &-per-{r}
      max-height(1% * r)

Answer 1

I don’t know if I got it right, but I think that’s what you need. If you have a variável containing a cor, you can include this color in the property, as below.

If you have this Stylus

vermelha = red

.cor-vermelha 
    background vermelha

.cor-vermelha--text
    color vermelha

CSS output

.cor-vermelha {
    background: red;
}

.cor-vermelha--text {
    color: red;
}

OBS: the detail is that with the above code you will have the text color equal to the background and you would not see the text because the two are the same color...

HTML

<h2 class="cor-vermelha cor-vermelha--text">Elemento</h2>

Answer 2

I had already left that aside, until today I discovered only by accident to have understood another factor of Stylus, ointerpolation with parameters, well, soon I discovered that I can do this way

  width(n)
    width n !important

  .width
    for row in 0..999999
      &-{row}
        width(1px * row)
    &-half
      width 50%
    &-full
      width 100%

and when creating an element with the class

<div class="width-100"/>

this will be 100 pixels or any amount up to at most 999999, may be more, but I see no reason for width

http://stylus-lang.com/docs/interpolation.html