Our Blog

Related Posts

Automating Plugin/Module Updates on Pantheon. We automated the process to apply plugin and module updates on Pantheon sites with a simple command.

Here is a handy design pattern for developing wordpress widgets. For this post, we will be generating a sidebar widget...

Here’s a common scenario: You want a page to have variable-width columns, but you don’t want to use tables to...

Popular Tags

Recent Comments

Brendon Carvalho
4.26.2018 - MSSQL Long Text Field Truncated In PHP
Hire Volusion Developers
4.7.2018 - Drupal 8 Roadmap

Cameron Macintosh

Recently, I had my first exposure to SASS, on a project here at Pixo. For those not familiar with SASS, the language is a superset of CSS which can be compiled into CSS. There are many compilers for SASS, for example Compass and PHP Sass are two in use at Pixo. CSS pre-processors like SASS and LESS are both awesome and invaluable tools.  They allow you to eliminate duplicate style definitions and break up your style sheets all while allowing you to compile everything back into a single stylesheet.

If you are not using one, I highly recommend you check these out and find one that best suits your development needs.

Here is one of the more interesting uses we came up with that makes me excited to continue learning this language. It is an inspired variation of this CSS-Tricks postQuick disclaimer: throughout these examples, we are taking a mobile first approach. (You can find additional reading about mobile first here and here)

Version 1: a basic breakpoint

@mixin breakpoint($start) {
  @media only screen and (min-width: $start)
    { @content; }
  }
}

Here, we have a breakpoint mixin that wraps our css content with a media query. We can make our styles only apply when the window is above a certain width. For example:

.some-element {
  background-color: grey;   /* default color */
}

@include breakpoint(900px) {
  .some-element {
    background-image: url(awsomeness.gif);   /* glorious animated image */
  }
}

However, you see yourself reusing the same pixel widths over and over. Is there anything we can do to clean this up?

Version 2: add named break points

Let’s start by defining a function to convert named break points to pixel widths:

@function convertBreakpoint($point) {
  @if $point == full {
    @return 1120px;
  }
  @else if $point == large {
    @return 980px;
  }
  @else if $point == medium {
    @return 900px;
  }
  @else if $point == small {
      @return 540px;
  }
  @else {
    @return $point;
  }
}

Now, let’s use that function in our mixin:

@mixin breakpoint($start) {
  @media only screen and
    (min-width: convertBreakpoint($start))
      { @content; }
  }
}

It’s best to pick 1-3 break points that make sense for your page. They do not necessarily have to match up with the pixel widths of your smartphone or tablet of choice, but they should match up to widths in your design where it makes sense to have 2 columns rather than 3 or to stack elements rather than have them side by side.

.some-element {
  background-color: grey;   /* default color */
}
@include breakpoint(large) {
  .some-element {
    background-color: yellow;  /* Brighten things up */
  }
}

As you add additional styles and expand your design, you may find the need for additional break points. We did. Adding medsmall=700px was painless. Actually, the only thing harder than adding the breakpoint was deciding what to call it.

But what if we wanted to cap the styling with a maximum width?

Version 3: an optional end point

@mixin breakpoint($start, $end: 0px) {
  @if $end > 0px {
    @media only screen and
      (min-width: convertBreakpoint($start)) and
      (max-width: convertBreakpoint($end) - 1)
        { @content; }
  }
  @else {
    @media only screen and
      (min-width: convertBreakpoint($start))
        { @content; }
  }
}

Here we add $end to capture our maximum width for the media query. To keep this generic, we added an @if-@else conditional to optionally apply the max-width property. So, now we have this handy mixin to apply our media queries to our styles.

.some-element {
  background-color: grey;   /* default color */
}
@include breakpoint(small, medium) {
  .some-element {
    background-color: yellow;  /* Brighten things up */
  }
}

Final Thoughts

With a mixin like this, we are not only able to abstract the application of media queries, but we are also able to consolidate our break point definitions into a single location. This handy ability is just one way that a CSS pre-processor like SASS helps to reduce the complexity and improve the maintainability of your style sheets.

Related Posts

Automating Plugin/Module Updates on Pantheon. We automated the process to apply plugin and module updates on Pantheon sites with a simple command.

Here is a handy design pattern for developing wordpress widgets. For this post, we will be generating a sidebar widget...

Here’s a common scenario: You want a page to have variable-width columns, but you don’t want to use tables to...

Recent Comments

Brendon Carvalho
4.26.2018 - MSSQL Long Text Field Truncated In PHP
Hire Volusion Developers
4.7.2018 - Drupal 8 Roadmap

Interested in working with us?
CONTACT US