Wir haben ein Modell davon, wie unsere BuySellAds-Zonen aussehen sollen. Lassen Sie uns also damit beginnen, sie wirklich zu erstellen. Die BuySellAds-Website enthält den Code, den wir auf unserer Website platzieren müssen, damit die Anzeigen geschaltet werden. Wir kopieren das und fügen es ein.
Wir versuchen, das CSS, das BSA auf die Site injiziert, auszuschalten, um sie zu formatieren (weil wir das selbst erledigen), aber wenn wir es jetzt ausschalten, wirkt es sich leider auch auf die Live-Site aus, sodass wir nur gegen das injizierte kämpfen müssen CSS für jetzt.
Wir verbringen den Rest der Zeit damit, die Anzeigen so zu positionieren und zu gestalten, dass genau das angezeigt wird, was wir wollen. Es ist ziemlich einfach, da wir bereits so viel eingerichtet haben, wie Mixins für Schriftstapel und Farben und so weiter.
Wir stoßen in dieser Serie auf eine Sache, auf die wir mehrmals stoßen, wo es für @extend
eine Klasse schön wäre, die nur in einer anderen Datei existiert, was Sie leider nicht können. In diesem Beispiel versuchen wir, ein BSA-injiziertes Div so zu gestalten, wie es .module
ist. Dies ist ein klassischer Fall für die Erweiterung, aber leider müssen wir einige Stile kopieren und einfügen.
Wir denken darüber nach, dass Flexbox uns hier hilft, entscheiden aber, dass es dafür einfach zu früh ist. Dies würde das Layout vereinfachen und uns gleiche Höhen geben. Na ja, wir werden es auf die zukünftige Wunschliste setzen.