Skip to main content
inserido resolução do problema
Fonte Link
flourigh
  • 899
  • 10
  • 29

resolução caso alguém chegue aqui com a mesma dúvida

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)

resolução caso alguém chegue aqui com a mesma dúvida

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)
tags editadas
Link
Renan Gomes
  • 19,3mil
  • 8
  • 54
  • 114
melhorando o exemplo de como poderia ser com uma sintaxe ficticia mais ainda
Fonte Link
flourigh
  • 899
  • 10
  • 29

É possivel recuperar uma parte do nome de uma classe em um elemento e passar como valor para a propriedade do CSS utilizand Stylus? Exemplo

.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
}

E neste caso, utilizar no elemento da seguinte forma

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

Neste caso, queria saber se isso é possível, como o vuetify faz algo assim, fiquei imaginando se é possível, lá tem por exemplo as classes de cores

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

Eu li no manual que existem Mixins, Variáveis e Funções só não entendi direito como utilizar e se possibilita o que mencionei


Vamos dizer que algo prático ficaria assim (estou apenas exemplificando com uma sintaxe qualquer)

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

É possivel recuperar uma parte do nome de uma classe em um elemento e passar como valor para a propriedade do CSS utilizand Stylus? Exemplo

.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
}

E neste caso, utilizar no elemento da seguinte forma

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

Neste caso, queria saber se isso é possível, como o vuetify faz algo assim, fiquei imaginando se é possível, lá tem por exemplo as classes de cores

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

Eu li no manual que existem Mixins, Variáveis e Funções só não entendi direito como utilizar e se possibilita o que mencionei

É possivel recuperar uma parte do nome de uma classe em um elemento e passar como valor para a propriedade do CSS utilizand Stylus? Exemplo

.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
}

E neste caso, utilizar no elemento da seguinte forma

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

Neste caso, queria saber se isso é possível, como o vuetify faz algo assim, fiquei imaginando se é possível, lá tem por exemplo as classes de cores

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

Eu li no manual que existem Mixins, Variáveis e Funções só não entendi direito como utilizar e se possibilita o que mencionei


Vamos dizer que algo prático ficaria assim (estou apenas exemplificando com uma sintaxe qualquer)

<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>
Fonte Link
flourigh
  • 899
  • 10
  • 29
Carregando