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. User Avatar
    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. User Avatar
    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).

    • User Avatar
      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.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag