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.

Comments

  1. williammalo2
    Permalink to comment#

    It’s too bad that (box-sizing: margin-box) doesn’t exist… it would make it easy to do the gutter.

  2. CWSpear
    Permalink to comment#

    @extend does 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.scss that extended something from typography and 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).

    • Chris Coyier
      Permalink to comment#

      Realllllly.

      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.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.