Как получить доступ к CSS переменным, созданным в блоке стиля с областью видимости в Vue + Buefy - PullRequest
Новая
       63

Как получить доступ к CSS переменным, созданным в блоке стиля с областью видимости в Vue + Buefy

0 голосов
/ 24 апреля 2020

Следуя документации Buefy , я смог настроить свои цвета и даже создать новые, используя is-[colorName] в качестве класса HTML элементов. 

<style lang="scss">
    // Import Bulma's core
    @import "~bulma/sass/utilities/_all";

    //Create your own colors.
    $download: #253091;
    $download-inverted: findColorInvert($download);

    // Setup $colors to use as bulma classes (e.g. 'is-twitter')
    $colors: (
      "white": ($white, $black),
      "black": ($black, $white),
      "light": ($light, $light-invert),
      "dark": ($dark, $dark-invert),
      "primary": ($primary, $primary-invert),
      "info": ($info, $info-invert),
      "success": ($success, $success-invert),
      "warning": ($warning, $warning-invert),
      "danger": ($danger, $danger-invert),

      "download": ($download, $download-inverted),
    );

    // Import Bulma and Buefy styles
    @import "~bulma";
    @import "~buefy/src/scss/buefy";

    //Custom global styles.    
    #app {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
</style>

Теперь на странице мне нужно получить доступ к переменной цвета, например, $ download, чтобы создать простой градиент. 

<style lang="scss" scoped>
    @import "~bulma/sass/utilities/_all";

    .gradient {
        background-image: linear-gradient($download, #info);
    }
</style>

Как получить доступ к переменным в другом Vue компоненте / странице?

Я подумал, что, поскольку блок стиля приложения. vue не был ограничен, я мог получить доступ к вновь созданным переменным отовсюду, но, очевидно, я не могу.

...