Sass for Context Aware CSS and Style Guide CSS Regression Testing

Context aware CSS is sort of the holy grail of front end developers. We want to develop components that not only respond to the width of viewport but also the width of the component’s parent as well.

For example, you have a list of blog posts that you want add to the main content area of your site. You develop the component Mobile First, so the font size is a little smaller, maybe you have abbreviated the content underneath the title, and the date and comments are nested nicely below the content. Now as the screen real estate begins to grow, you increase the font size of the title, reveal some more content for the reader to digest, and move the date to a stylized box to the left of the title. Finally, you’ve reached your maximum breakpoint, and the font size of the title increases again, you reveal all the content under each item, and the comments move to a fancy little bubble to the right of title. All this sound pretty familiar?

Now let’s move that same component to the sidebar on another page. The limited width of the sidebar breaks the design you’ve created for the largest breakpoint because the component is responding to the width of the viewport, not its context within the layout. Ultimately, we’d like that component to inherit the same styles that we developed for the limited viewport width of mobile, but currently that’s not possible without some taxing JS. However, what if we utilized Sass to create a workaround for us.

Context Aware CSS with Sass

In addition to creating well crafted and self contained components, this problem also comes into play when we want to unit test our components. I try to utilize a style guide as much as possible for every piece of HTML and CSS I create on a given site. This allows me to quickly look through each component and make sure any changes I make to the CSS is not causing unexpected results. There are also tools available for CSS Regression Testing, that will take a screenshot of your style guide before and after you’ve made a change, and do a visual diff on the image to insure the changes you’re making are isolated to the component you are editing. Typically, to view the small, medium, and large version of a component, you would resize your browser and see how it reacts. With the method below, however, I feel like it will solve both the issue of Context Aware CSS, and blown out states for viewport widths of components.

The Mixin


// ==========================================================================
// @mixin respond-to
// ==========================================================================

$media-query-support: true !default;
$context-aware-support: false !default;

@mixin respond-to($media: 320, $mq-support: $media-query-support, $ca-support: $context-aware-support) {
  @if $mq-support == true {

    // output content wrapped in media queries
    // if greater than smallest breakpoint
    @if $media <= 320 {
        @content;
    } @else {
        @media (min-width: #{$media / 16}em) { @content; }
    }

    // output content wrapped in context aware class
    @if $ca-support == true {
        .bp-#{$media} & { @content; }
    }

  } @elseif $mq-support == false {

    // just output the content for legacy browsers
    @if $media <= 1024 {
      @content;
    }
  }
}

Example Use


.button {
    @include respond-to(320) {
        font-size: 1em;
    }

    @include respond-to(768) {
        font-size: 1.5em;
    }

    @include respond-to(1024) {
        font-size: 2em;
    }
}

<a class="button" href="#">Button</a>

<div class="bp-320">
    <a class="button" href="#">Button</a>
</div>

<div class="bp-768">
    <a class="button" href="#">Button</a>
</div>

<div class="bp-1024">
    <a class="button" href="#">Button</a>
</div>

Codepen

See the Pen YPPXVP by Pete (@pete_schuster) on CodePen.

The above will output the CSS you wrap in the mixin in a media query but also in an additional class ".bp-N" where "N" is the pixel value of the media query you are trying to target. By default, I set the support for the context aware class to false because I do think its something that should be turned on only when necessary. Because this duplicates the rules in the media query, the output CSS can get bloated with duplicate rules very quickly. I would advise only to use this method only on development sites for testing purposes with CSS regression testing of a style guide.

posted in: Front End Development
tagged: , , ,

Comments are closed