CSS переменная в элементе CSS - PullRequest
Новая
       35

CSS переменная в элементе CSS

0 голосов
/ 21 июня 2019

Я использую функцию css в litelement для присваивания некоторых значений, например: 

    static get styles() {
    return css`
        .formaFabrica {
            stroke: var(--svg-lente-stroke);
            stroke-width: var(--svg-forma-width);
        }
    `}

Работает нормально, но когда я смотрю на это в devtools, я вижу это

screenshot

Переменная CSS была заменена присвоенным ей значением.

Это затрудняет изменение таблицы стилей, поскольку нам нужно перейти к исходному тексту.узнать имя переменной.

Удивительно, но на другой стиль это не влияет.

Можно ли как-то увидеть исходные данные в инструментах разработчика?

1 Ответ

1 голос
/ 24 июня 2019

интересная "проблема" у вас есть ... кажется, единственный способ воспроизвести это, добавив определение переменной в том же "определении" css.

Как только я добавляю значение переменной к host, она работает нормально. Мне кажется, это ошибка браузера: /

Размещение на хосте может быть правильным решением.

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

Если вам требуется «внешняя» переменная css, вы можете обойти ее, «переназначив» ее в хосте, например, 

:host {
  --good-variable: var(--external-variable);
}



  // can be used to disable constructable styleheets on chrome
  // delete Document.prototype.adoptedStyleSheets;



  html {
    --svg-stroke-from-external: #ff0000;
  }


  

import { LitElement, html, css } from 'https://unpkg.com/lit-element?module';

class SimpleGreeting extends LitElement {
  static get styles() {
    return css`
        :host {
          --svg-stroke-width: 10px;
          --svg-stroke-from-host: #ff0000;
          --svg-stroke-from-host-mapped-from-external: var(--svg-stroke-from-external);
        }
        .formaFabrica {
            --svg-stroke-from-same-rule: #ff0000;
            stroke: var(--svg-stroke-from-same-rule);
            stroke-width: var(--svg-stroke-width);
        }
        .formaFabrica2 {
            stroke: var(--svg-stroke-from-host);
            stroke-width: var(--svg-stroke-width);
        }
        .formaFabrica3 {
            stroke: var(--svg-stroke-from-external);
            stroke-width: var(--svg-stroke-width);
        }       
        .formaFabrica4 {
            stroke: var(--svg-stroke-from-host-mapped-from-external);
            stroke-width: var(--svg-stroke-width);
        }        
        
        /* demo formatting */
        div { float: left; }
    `;
  }

  render() {
    return html`
      
        variable definition on same element
        
          
        
        Results in: 
        
          stroke: #ff0000;

определение переменной на хосте

<путь d = "M150 0 L75 200 L225 200 Z" class = "formaFabrica2" />

Результаты: 

          stroke: var(--svg-stroke-from-host);

определение переменной через "внешний" css

<путь d = "M150 0 L75 200 L225 200 Z" class = "formaFabrica3" />

Результаты: 

          stroke: #ff0000;

определение переменной через "внешний" css

<путь d = "M150 0 L75 200 L225 200 Z" class = "formaFabrica4" />

Результат: 

          stroke: var(--svg-stroke-from-host-mapped-from-external);
`; } } customElements.define ('simple-приветствие', SimpleGreeting); <Простое-приветствие> </ простое приветствие>
...