SASS / LESS CSS Mixins

Preset mixins to help speed up web development. Provides cross-browser compatibility with things like, border-radius, opacity, color gradients, and more. We’ll be going over a couple benefits of using CSS processors and their mixins and then show off a few of the mixins we’ve built for ourselves. Feel free to download them and use them for your own projects.

This tutorial will show the LESS syntax. SASS syntax is a little different, but the result will be the same.

SASS Preset mixins to help speed up web development. Provides cross-browser compatibility with things like:

  • Rounded Corners
  • Opacity
  • Box Shadow
  • Box Shadow (Inset)
  • Gradient (Horizontal)
  • Gradient (Vertical)
  • CSS3 Transition
  • CSS3 Transforms

What are the benefits?

There are a lot of benefits to using a CSS processor. The biggest being that you don’t rewrite code. We all love the DRY (don’t repeat yourself) way of doing things and CSS processors reduce the code we have to write. Below are some benefits:

  • Variables for colors
  • Calculations
  • Nested Rules
  • Mixins

I personally like creating color variables at the very beginning to help to define a theme for my site. Simple things like @bluePrimary:#47639E;. Then later in your code, you can do body { background:@bluePrimary; }. This can be a powerful technique when creating large sites with multiple colors in your theme. You can also lighten and darken your colors by using calculations to create gradients.

Nested rules make developing much easier as well. For example, when writing a navigation, you don’t have to call #main-nav ul li multiple times. Read the official docs to learn more.

The following mixins will automatically create browser-specific rules to accommodate multiple browsers. For example, the @include border-radius(4px) mixin will create:


border-radius           : 4px;
-moz-border-radius      : 4px;
-webkit-border-radius   : 4px;

You don’t have to type in three separate lines every time you want cross browser compatibility. That one line will set the border radius for the various browsers. Accepts pixels or percentages.

Requirements

The Mixins

Rounded Corners

LESS Mixin Compiled CSS
@include border-radius(5px); border-radius : 5px; -moz-border-radius : 5px; -webkit-border-radius : 5px;
<h3>
  Opacity
</h3>

<p>
  Set the opacity of any element. This will set the opacity of the element plus its children. For just setting the opacity of a background, look at Background Alpha
</p>

<h5>
  Less Mixin
</h5>

<p>
  @include opacity(0.5);
</p>

<h5>
  Compiled CSS
</h5>

<pre><code class="language-css"> opacity : 0.5; -moz-opacity : 0.5; -webkit-opacity : 0.5; -ms-filter : ~"progid:DXImageTransform.Microsoft.Alpha(opacity=0.5)"; /* IE 8 / filter : ~"alpha(opacity = 0.5)"; / IE 5-7 */</code> </pre>

<h3>
  Background Alpha
</h3>

<p>
  Creates a transparent background. The contents of the element will stay at normal capacity.
</p>

<h5>
  Less Mixin
</h5>

<p>
  @include background-alpha(#000, 0.5);
</p>

<h5>
  Compiled CSS
</h5>

<pre><code class="language-css"> @acolor : hsla(hue(#000), saturation(#000), lightness(#000), @alpha); @iecolor : argb(#000); 

background-color : #000; /* fallback color */ background-color : #000;

/* IE */ background-color : transparent9; filter : ~”progid:DXImageTransform.Microsoft.gradient(startColorstr= @{iecolor}, endColorstr= @{iecolor})”; zoom:1;

<h3>
  Box Shadow
</h3>

<p>
  Create a box shadow. Accepts 5 options: <code>@include box-shadow($x-size, $y-size, $blur, $color, $spread);</code>
</p>

<table class="table table-responsive table-bordered">
  <thead>
    <tr>
      <td>
        LESS Mixin
      </td>

      <td>
        Compiled CSS
      </td>
    </tr>

    <tbody>
      <tr>
        <td>
          @include box-shadow(2px, 2px, 5px, #333, 0px);
        </td>

        <td>
          box-shadow : 2px 2px 5px 0px #333; -moz-box-shadow : 2px 2px 5px 0px #333; -webkit-box-shadow : 2px 2px 5px 0px #333;
        </td>
      </tr>
    </tbody></table> 

    <h3>
      Box Shadow (Inset)
    </h3>

    <p>
      Create an inner box shadow. Accepts 5 options: <code>@include box-shadow(@x-size, @y-size, @blur, @color, @spread);</code>
    </p>

    <table class="table table-responsive table-bordered">
      <thead>
        <tr>
          <td>
            LESS Mixin
          </td>

          <td>
            Compiled CSS
          </td>
        </tr>

        <tbody>
          <tr>
            <td>
              @include box-shadow-inset(2px, 2px, 5px, #333, 0px);
            </td>

            <td>
              box-shadow : 2px 2px 5px 0px #333; -moz-box-shadow : 2px 2px 5px 0px #333; -webkit-box-shadow : 2px 2px 5px 0px #333;
            </td>
          </tr>
        </tbody></table> 

        <h3>
          Gradient (Horizontal)
        </h3>

        <p>
          Create a horizontal gradient.
        </p>

        <h5>
          Less Mixin
        </h5>

        <p>
          @include gradient-horizontal(#FFF, #E7E7E7);
        </p>

        <h5>
          Compiled CSS
        </h5>

        <pre><code class="language-css">

background : #FFF; /* Fallback solid color for old browsers / background : linear-gradient(to right, #FFF 0%, #E7E7E7 100%); / W3C / background : -moz-linear-gradient(left, #FFF 0%, #E7E7E7 100%); / FF 3.6+ / background : -ms-linear-gradient(left, #FFF 0%, #E7E7E7 100%); / IE 10+ / background : -o-linear-gradient(left, #FFF 0%, #E7E7E7 100%); / Opera 11.10+ / background : -webkit-linear-gradient(left, #FFF 0%,#E7E7E7 100%); / Chrome 10+, Safari 5.1+ / background : -webkit-gradient(linear, left top, right top, color-stop(0%,#FFF), color-stop(100%,#E7E7E7)); / Chrome, Safari 4+ / filter : ~”progid:DXImageTransform.Microsoft.gradient(startColorstr= ‘#FFF’, endColorstr= ‘#E7E7E7’, GradientType=1)”; / IE 6-9 */

        <h3>
          Gradient (Vertical)
        </h3>

        <h5>
          Less Mixin
        </h5>

        <p>
          @include gradient-vertical(#FFF, #E7E7E7);
        </p>

        <h5>
          Compiled CSS
        </h5>

        <pre><code class="language-css">

background : #FFF; /* Fallback solid color for old browsers / background : linear-gradient(to bottom, #FFF 0%, #E7E7E7 100%); / W3C / background : -moz-linear-gradient(top, #FFF 0%, #E7E7E7 100%); / FF 3.6+ / background : -ms-linear-gradient(top, #FFF 0%, #E7E7E7 100%); / IE 10+ / background : -o-linear-gradient(top, #FFF 0%, #E7E7E7 100%); / Opera 11.10+ / background : -webkit-linear-gradient(top, #FFF 0%,#E7E7E7 100%); / Chrome 10+, Safari 5.1+ / background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(100%,#E7E7E7)); / Chrome, Safari 4+ / filter : ~”progid:DXImageTransform.Microsoft.gradient(startColorstr= ‘#FFF’, endColorstr= ‘#E7E7E7’, GradientType=0)”; / IE 6-9 */

        <h3>
          CSS3 Transition
        </h3>

        <table class="table table-responsive table-bordered">
          <thead>
            <tr>
              <td>
                LESS Mixin
              </td>

              <td>
                Compiled CSS
              </td>
            </tr>

            <tbody>
              <tr>
                <td>
                  @include transition(all, 5s, ease-in-out);
                </td>

                <td>
                  transition : all 5s ease-in-out; -moz-transition : all 5s ease-in-out; -webkit-transition : all 5s ease-in-out; -o-transition : all 5s ease-in-out;
                </td>
              </tr>
            </tbody></table> 

            <p>
              Applies a CSS3 transition to an element. This will be used to transition CSS effects like :hover.
            </p>

            <h2>
              Conclusion
            </h2>

            <p>
              Overall, CSS processors are a great tool to speed up your workflow. They can integrate into your current site or you can build a site from scratch. Either way, you can have some real fun creating mixins and experimenting with new CSS techniques.
            </p>

Chris Sevilleja

Co-founder of Scotch.io. Slapping the keyboard until something good happens.