У нас есть макет того, как мы хотим, чтобы наши зоны BuySellAds выглядели, поэтому давайте приступим к его созданию по-настоящему. Веб-сайт BuySellAds предоставляет код, который нам нужно разместить на нашем сайте для показа рекламы. Мы копируем и вставляем это поверх.
Мы пытаемся отключить CSS, который BSA внедряет на сайт, чтобы стилизовать их (потому что мы справимся с этим сами), но, к сожалению, если мы отключим его сейчас, это также повлияет на живой сайт, поэтому мы должны просто бороться с внедренными CSS на данный момент.
Остальное время мы тратим на позиционирование и стилизацию рекламы, чтобы она отображалась именно так, как мы хотим. Это довольно просто, поскольку у нас уже есть так много всего, как миксины для стека шрифтов, цветов и прочего.
Мы сталкиваемся с вещью, с которой несколько раз сталкивались в этой серии, где было бы хорошо, если @extendбы класс существовал только в другом файле, что, к сожалению, вы не можете сделать. В этом примере мы пытаемся сделать внедренный в BSA стиль div таким же, как .moduleесть, что является классическим случаем для расширения, но, увы, мы должны скопировать и вставить некоторые стили.
Мы думаем о том, что здесь нам может помочь flexbox, но решаем, что еще слишком рано для этого. Это упростило бы макет, а также дало бы нам одинаковую высоту. Ну что ж, мы добавим это в будущий список желаний.