CSS-переменные не работают в медиа-запросах с использованием Sass - PullRequest
Новая
       22

CSS-переменные не работают в медиа-запросах с использованием Sass

0 голосов
/ 01 мая 2018

У меня проблема при изменении переменных css через медиа-запросы.
Стили медиазапроса 768px не применяются. 

   :root {
      --profile-picture-size-w: 9rem;
      --profile-picture-size-h: 9rem;
      --profile-picture-border: 1px solid #1e96a9;
      --profile-box-backgound-size: cover;
      --profile-box-p: 20px 0;
      --article-dateInfo: 3px;
    }
 .component{
  #main_content {
    .scrollbarContent{
      article#profile {
        .profileBox {
          background-size: var(--profile-box-backgound-size);
          padding: var(--profile-box-p);
            .profilePicture {
              width: var(--profile-picture-size-w);
              height: var(--profile-picture-size-h);
              .photo {
                border: var(--profile-picture-border);
              }
            }
        }
        article#dateInfo {
          padding: var(--article-date-info);

        } }

      }
    }
  }

@media all and (min-width: 768px){
  --profile-picture-size-w: 5.5rem;
  --profile-picture-size-h: 5.5rem;
  --profile-picture-border: 5px solid #1e96a9;
  --profile-box-backgound-size: 100% 38%;
  --profile-box-p: 20px 0 0 0;
  --article-date-info: 0;
  :host {
    height: 77vh;
  }
}

это тоже не работает: 

     @media all and (min-width: 768px){
         :root {
          --profile-picture-size-w: 5.5rem;
          --profile-picture-size-h: 5.5rem;
          --profile-picture-border: 5px solid #1e96a9;
          --profile-box-backgound-size: 100% 38%;
          --profile-box-p: 20px 0 0 0;
          --article-date-info: 0;
              }
          :host {
            height: 77vh;
          }
        }

Но при размещении этого медиазапроса внутри компонента он работает, но на этот раз свойства менее 768 пикселей не применяются. Странная проблема. Есть идеи?

...