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 {
 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
 #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); }


The WordPress Research Project now on - the page about my project – the page about my project has published a page about my research project “What You Should know about WordPress”. Eaviden is a web portal presenting the research and innovation activities on the Danish business academies.

On the page you find a description of the project, and links to my research blog (you’re reading it now). The text is in danish.

Here is the link to my project:

Det skal du vide om WordPress

Smashing Magazine tweet about my eBook

Vitaly Friedman and the Smashing Magazine kindly shared the link to my eBook on Twitter.  Smashing Magazine is always a great source of inspiration on everything about coding, design, graphics and UX trends.