We have a mockup of how we want our BuySellAds zones to look like, so let’s get on building it for real. The BuySellAds website provides the code we need to put on our site for the ads to show up. We copy and paste that over.
We attempt to shut off the CSS that BSA injects onto the site to style them (because we’ll handle that ourselves) but unfortunately if we shut if off now it affects the live site as well, so we have to just fight against the injected CSS for now.
We spend the rest of the time positioning and styling the ads to show up just how we want. It’s pretty easy going since we have so much in place already, like mixins for font stacks and colors and whatnot.
We run into a thing that we run into a number of times in this series, where it would be nice to
@extend a class that only exists in another file, which unfortunately you aren’t able to to. In this example, we’re trying to make a BSA injected div styled just like
.module is, which is a classic case for extend, but alas, we have to copy and paste some styles.
We ponder about flexbox helping us here, but decide it’s just too early for that. It would make the layout easier as well as give us equal heights. Oh well, we’ll put it on the future wishlist.
It’s too bad that (box-sizing: margin-box) doesn’t exist… it would make it easy to do the gutter.
@extenddoes work cross-file. I don’t know if it’s because you were on an older version. I am using SASS 3.2.1.
I had a class in another file (
_typography.scss), and I tried importing it above and below another class in
style.scssthat extended something from
typographyand it worked fine.
The one ‘gotcha’ is when you use
@extend, it is placed in the stylesheet where the original is, so keep that in mind, as selectors lower in the stylesheet with the same weight override ones above it. (i.e. if you were trying change the color, you might have a problem if you’re extending something below you in the stylesheet).
That’s interesting I’ll have to try out a reduced test case project and see if I can get it working. Indeed it might be Sass version, but I haven’t read anything about specifically that. There also might have been something else weird going on in my project, hard to know.
Unfortunately, you’ll probably get sick of me moaning about it in future videos too because it comes up over and over.
I’m new to SASS (love it btw) but I think I figured out a way to make !important in font stacks optional. This may not be the best way to approach it, but it’s a start.
Then you can implement it by simply adding important to your function call.
I tried a more binary approach 0 = false, 1 = true. but the “1” kept failing for some reason. This is just as simple really.
I figured out why the true/false wasn’t working. You can’t have the 1 in quotes.
So no this works: