используйте mixins как имена классов в стилусе - PullRequest
0 голосов
/ 30 апреля 2018

Я новичок в стилусе и работаю над проектом с целью создания небольшой библиотеки компонентов. Я хотел знать, есть ли способ использовать миксины в качестве имен классов для достижения следующего:

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

Тогда я бы использовал это в шаблоне HTML как:

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

То, чего я в основном пытаюсь добиться, - это простой способ имитировать распылитель (https://acss.io/guides/atomizer.html) с помощью стилуса.

Я также открыт для любых других способов достижения этого.

Заранее спасибо!

1 Ответ

0 голосов
/ 10 июля 2018

Stylus - это язык препроцессора, даже в Vue он не динамический после компиляции.

Но вы можете архивировать это, генерируя каждый вариант цвета в качестве класса.

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