Use a SASS in WordPress Themes

A SASS mixin can save you from writing hundreds of CSS-lines in your WordPress theme. One of the great features of SASS is mixins. They resemble a function in ordinary programming. You create a series of commands, and pass certain variables. Then you don’t have to write the same code over and over again.

The _S (Underscores) theme is a wonderful tool, if you want to create a WordPress theme from scratch. Here SASS really shines, because you can create a mixin, and pass whatever numbers or settings that are needed. It’s as easy as this:

// tablets: iPads and friends
@media only screen and (max-width: 768px) {
    @include responsive(700px,400px,300px,1.1em); 
}

// mobile
@media only screen and (max-width: 598px) {
    @include responsive(500px,500px,500px,20px); 
}

And so on – in this way you can define the width of any HTML element. The SASS code for this particular mixin is:

@mixin responsive(
    $page,
    $primary,
    $aside,
    $siteTitle
 ) {

#page {
 background-color: #fff;
 max-width: $page;
 margin: auto;
 }
 
 // "wrapper" content container 
 #content {
 @include flexbox(); // prefixes for browsers
 display: flex;
 flex-wrap: wrap;
 }
 
 // content
 #primary {
 width: $primary;
 max-width: 100%;
 }
 
 // sidebar, widgets
 aside {
 width: $aside;
 max-width: 100%;
 }
 
 // site title size
 .site-title {
 a {
 font-size: $siteTitle; 
 } 
 }
 
 // images and media
 img, 
 iframe, 
 .entry-footer, 
 .entry-content, 
 .entry-header,
 .entry-footer, 
 .site-branding,
 .site.title,
 #mast-head {
 max-width: 100%; 
 }
} // end responsive mixin

Perhaps you feel that the mixin code is long. But on the other hand, you only have to write this code once. From now on you can pass variables to the responsive design in just one line:

.someClass { @include responsive(980px,500px,420px); }

Q.E.D.