Вложенные элементы и конкатенация классов с использованием Sass - PullRequest
Новая
       14

Вложенные элементы и конкатенация классов с использованием Sass

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

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

У меня естьдва блока HTML с классами вроде распределены так: 

<div class="my-class">
  <div class="my-class-parent-one">
    <div class="my-class-wrapper">
      <div class="my-class-child"></div>
      <div class="my-class-child"></div>
    </div>
  </div>
<div>

<div class="my-class">
  <div class="my-class-parent-two">
    <div class="my-class-wrapper">
      <div class="my-class-child"></div>
      <div class="my-class-child"></div>
    </div>
  </div>
<div>

Мой Sass ... 

.my-class {
  &-parent-one &-wrapper &-cell { font-size: 1.15rem; }
  &-parent-two &-wrapper &-cell { font-size: 0.85rem; }
}

Если это не эквивалентно этому: ?? 

.my-class .my-class-parent-one .my-class-wrapper .my-class-child {}    
.my-class .my-class-parent-two .my-class-wrapper .my-class-child {}

Ответы [ 3 ]

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

Ваш SASS будет компилироваться так: 

.my-class-parent-one .my-class-wrapper .my-class-cell {
  font-size: 1.15rem;
}
.my-class-parent-two .my-class-wrapper .my-class-cell {
  font-size: 0.85rem;
}

http://www.cssportal.com/scss-to-css/

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

Ваш Sass будет скомпилирован следующим образом: 

.my-class-parent-one .my-class-wrapper .my-class-cell {
  font-size: 1.15rem;
}
.my-class-parent-two .my-class-wrapper .my-class-cell {
  font-size: 0.85rem;
}

Обратите внимание, что в начале не будет селектора .my-class.Чтобы добавить .my-class, вам нужно изменить свой Sass: 

.my-class {
  & &-parent-one &-wrapper &-cell { font-size: 1.15rem; }
  & &-parent-two &-wrapper &-cell { font-size: 0.85rem; }
}

Вот более подробный текст об амперсанде в Sass: Амперсанд Sass

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

Когда вы соединяете амперсанд с вложением SASS, он просто использует родительское имя для перехода к следующему классу.Если вы хотите использовать амперсанд для включения .my-class перед продолжением, вам нужно добавить отдельный амперсанд перед: 

.my-class {
  & &-parent-one &-wrapper &-cell { font-size: 1.15rem; }
  & &-parent-two &-wrapper &-cell { font-size: 0.85rem; }
}
...