Using Mixins in Bootstrap 3 to Avoid Unsemantic Markup for Layout Structure

Using mixins in bootstrap 3 to avoid unsemantic markup for layout structure

You should import the bootstrap.lessfile. So, download the full bootstrap project, and copy out the less folder. It contains everything. And then put the less folder in your project. Also make sure to add the less.js file to your project if you want to get your less compiled while your working. Look at lesscss.org for more information. And also make sure that you have a local server like mamp or xamp, because you can't see the results if you are just serving static html from file:// ....

Sample Image

In your custom less file do something like this:

custom.less

@import "../less/bootstrap.less";

 section {
    .make-row();
}
.left-navigation {
    .make-sm-column(3);
}
.main-content {
    .make-sm-column(9);
}

html

<head>
    <link rel="stylesheet/less" href="css/custom.less">
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js"></script>
</head>
<section>
<div class="left-navigation">
</div>
<div class="main-content">
</div>
</section>

How to use Bootstrap whilst maintaining semantic HTML markup?

Bootstrap provides mixins which you can use. So instead of adding classes like col-xs-12 in the HTML, you'd use @include make-xs-column(12) inside the selector block for the element. To add a row, there's the @mixin make-row.

Referring to an answer by Alexey Morashko, instead of this unsemantic markup:

<div class="items-list row">
    <div class="item col-xs-12 col-sm-6 col-md-4">
        <div class="item-name">Product first</div>
        <div class="item-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    </div>
    <div class="item col-xs-12 col-sm-6 col-md-4">
        <div class="item-name">Product second</div>
        <div class="item-description">Ratione, ullam, reprehenderit aliquid saepe ab harum.</div>
    </div>
    <div class="item col-xs-12 col-sm-6 col-md-4">
        <div class="item-name">Product third</div>
        <div class="item-description"> totam repudiandae velit eum accusantium veritatis.</div>
    </div>
</div>

You can instead use:

HTML

<div class="items-list">
    <div class="item">
        <div class="item-name">Product first</div>
        <div class="item-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    </div>
    <div class="item">
        <div class="item-name">Product second</div>
        <div class="item-description">Ratione, ullam, reprehenderit aliquid saepe ab harum.</div>
    </div>
    <div class="item">
        <div class="item-name">Product third</div>
        <div class="item-description"> totam repudiandae velit eum accusantium veritatis.</div>
    </div>
</div>

CSS

.items-list {
    @include make-row();     
    .item 
        @include make-xs-column(12);
        @include make-sm-column(6);
        @include make-md-column(4);
    }
}

You can find more examples of Bootstrap mixins in the Sitepoint article - 5 Useful Sass Mixins in Bootstrap.

Does sass harm performance?

You have to find your compromise between maintainability (nesting makes it easier to find your way around in the stylesheet) and rendering performance.

A rule of thumb says you should try to restrict yourself to a three-level nesting and you should avoid to nest IDs if it's not necessary.

However, I think nesting too much is not the biggest issue. As soon as I became aware of the power of mixins, I used them a lot.

For example, this is my often used button mixin:

@mixin small-button($active-color: $active-color, $hover-color: $button-hover-color, $shadow: true)
  display: inline-block
  padding: 4px 10px
  margin:
    right: 10px
    bottom: 10px
  border: none
  background-color: $button-color
  color: $font-color-inv
  +sans-serif-font(9px, 700)
  text-align: center
  text-transform: uppercase
  cursor: pointer
  @if $shadow
    +light-shadow
  &:hover
    text-decoration: none
    background-color: $hover-color
  &:last-child
    margin-right: 0
  a
    color: $font-color-inv
    &, &:hover
      text-decoration: none
  &.disabled
    +opacity(0.75)
    &:hover
      background-color: $button-color
  &.active
    background-color: $active-color
    &.disabled:hover
      background-color: $active-color

You see, quite a bit code. Applying such mixins to many elements on your page will result in a big CSS file which takes longer to be interpreted.

In the old fashioned CSS-way you would give each button element e.g. the class .small-button. But this method pollutes your markup with unsemantic classes.

Sass provides a solution though: selector inheritance via the @extend directive.

If you set defaults for your parameter of the mixin, you can also provide a simple class, which uses the mixins with your default:

// Use this mixin via @extend if you are fine with the parameter defaults
.small-button
  +small-button

And then you can just inherit from this class in various contexts:

#admin-interface
  input[type=submit]
    @extend .small-button

The resulting CSS statement aggregates all usages of .small button into one rule with comma-separated selectors:

.small-button, #admin-interface input[type=submit] {
  display: inline-block;
  ...
}

Concluding, a naive usage of Sass can effect your CSS performance. Used wisely, however, it is maintainable thanks to well-structured and DRY code, it leads to proper separation of markup and styling (semantic classes only) and allows for smart and performant CSS code.

Using Mixins in Bootstrap 3 to Avoid Unsemantic Markup for Layout Structure