UbaidParvez Ответов: 1

Код стилизации для изображений не работает?

Я стилизовал некоторые изображения в sass, так как с ними ничего не происходит, даже этот код тоже скомпилирован в css.





Это html-часть этих изображений.

<div class="composotion">

      <img src="img/nat-1-large.jpg" alt="Photo 1" class="composition_photo composition_photo--p1">

      <img src="img/nat-2-large.jpg" alt="Photo 2" class="composition_photo composition_photo--p2">

      <img src="img/nat-3-large.jpg" alt="Photo 3" class="composition_photo composition_photo--p3">

  </div>





Так вот, дерзкая часть этих изображений.


.composotion {

   position: relative; 

   &__photo {
       width: 20%;
     
       position: absolute;

       

       &--p1 {
        left: 0;
        top: -2rem;


    }

    &--p2 {
        right: 0;
        top: 2rem;


    }

    &--p3 {
        left: 20%;
        top: 10rem;


        }

   
}
}




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

Что я уже пробовал:

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

1 Ответов

Рейтинг:
1

Richard Deeming

Скомпилированный CSS-это:

.composotion {
  position: relative;
}
.composotion__photo {
  width: 20%;
  position: absolute;
}
.composotion__photo--p1 {
  left: 0;
  top: -2rem;
}
.composotion__photo--p2 {
  right: 0;
  top: 2rem;
}
.composotion__photo--p3 {
  left: 20%;
  top: 10rem;
}

Обратите внимание на двойные подчеркивания в названиях классов фотографий. Ваш HTML-код имеет только одно подчеркивание.

Либо изменить &__photo к &_photo, или измените имена классов фотографий, чтобы они соответствовали сгенерированным именам классов - например: class="composition__photo composition__photo--p1"