Polymer app-grid @apply с другой проблемой переменной - PullRequest
Новая
       61

Polymer app-grid @apply с другой проблемой переменной

0 голосов
/ 30 октября 2019

У меня довольно большая проблема с получением рабочего стиля, который включен в пользовательские стили в моем окончательном HTML (без создания нового компонента).

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

Как я уже говорилэто не импорт, а точка входа для моего сайта, куда я импортирую компоненты. Проблема здесь в том, что мой вычисляющий --app-grid-expand mixin берет только переменную --app-grid-expandible-item-columns из бумажной карты и не принимает другие классы при использовании @apply, даже когда я вижу в проверке браузерау него есть правильный номер для вычисления, похоже, он не будет отображать его. Я совершенно запутался в этом вопросе. но когда я копирую -> вставляю в каждый класс или использую класс для вычислений и другой класс только для переменной с размером, который работает. но не с @apply. 

<!------------------- CUSTOM STYLES BEGINNING -------------------->
<custom-style>
    <style is="custom-style" include="app-grid-style">
        paper-card {
            --app-grid-gutter: 16px;
            --app-grid-columns: 4;
            --app-grid-expandible-item-columns: 3; <- accepted
            --app-grid-expand: {
                -webkit-flex-basis: calc((100% - 0.1px) / var(--app-grid-columns, 1) * var(--app-grid-expandible-item-columns, 1) - var(--app-grid-gutter, 0px)) !important;
                flex-basis: calc((100% - 0.1px) / var(--app-grid-columns, 1) * var(--app-grid-expandible-item-columns, 1) - var(--app-grid-gutter, 0px)) !important;
                max-width: calc((100% - 0.1px) / var(--app-grid-columns, 1) * var(--app-grid-expandible-item-columns, 1) - var(--app-grid-gutter, 0px)) !important;
            }
        }

        .col3 {
            --app-grid-expandible-item-columns: 3; <- not accepted
            @apply --app-grid-expand;
        }
    </style>
</custom-style>
<!------------------- CUSTOM STYLES END -------------------------->
<!------------------- CONTENT BEGINNING -------------------------->
<paper-card class="app-grid">
    <div class="col3">Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
</paper-card>
<!------------------- CONTENT END -------------------------------->

Я ожидал принять значение от каждого класса, который сообщит CSS, насколько он должен расширяться.

...