Как использовать стилус для доступа к переменным JavaScript в VUE файле?

Question

Например:

<script>
    export default {
        data() {
            return{
                varinjs: 1,
            }
        }
    }
</script>
<style lang="stylus">
    varincss = varinjs

    body
      if varincss  == 0
        background-color red
      else varincss == 1
        background-color blue
</style>

Есть ли способ доступа к переменным javascript в css？ можно использовать sass или меньше, но я бы нравится стилус намного больше.

Answer 1

Для этого можно использовать пользовательские свойства CSS.

Свяжите с ними переменные стилуса и просто обрабатывайте изменения в JavaScript.

<script>
  export default {
    data () {
      return {
        theme: { background: '#ff0000' }
      };
    },
    watch: {
      'theme.background': { immediate: true, handler: 'applyVariables' }
    },
    methods: {
      applyVariables () {
        const scope = document.documentElement.styles;
        scope['--theme-background'] = this.theme.background;
      }
    }
  };
</script>

<style lang="stylus">
  theme-background = var(--theme-background, #ff054a);
  // The first argument is variable name and second is placeholder value.

  .theme-button
    background-color: theme-background
</style>

Ссылка на пользовательские свойства CSS в MDN

Answer 2

Я знаю, что это не ответ на этот вопрос (я хотел бы прокомментировать), но я постараюсь дать альтернативное решение.

Stylus поддерживает встроенную функцию json(path[, options]), что означает, что вы можете поместить все переменные в файл JSON и предоставить их как для файлов JS, так и для файлов Stylus.

Вы не можете получить доступ к переменной стилуса с помощью JS, и вы, вероятно, не сможете этого сделать, если не найдете какие-то библиотеки времени сборки, которые преобразуют указанный файл / переменную js в переменные стилуса.