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