How to use LESS CSS preprocessor to style theme in Drupal Bootstrap

This article is for those who are new to Drupal Bootstrap and responsive design. Drupal Bootsrap is a responsive theme you can download it from Drupal.org. It is one of the best responsive theme and created using boostrap framework. Creating a sub theme of Bootstrap is explained in another article of mine. This article mainly concentrated about How to use LESS to style bootstrap theme Drupal.

After you create a sub theme for Bootstrap install LESS CSS preprocessor in Drupal. Once you install LESS, go to sites/all/theme/your_Bootstrap_sub_theme/less

Create a file with .less. Let's create a file called zyx.less. Once u create a less file open style.less and import your file. This can be done @import 'zyx.less'

Now open your zyx.less file and add your styles like the way you style CSS files. Remember one thing LESS uses variables, function and Mixins. Always use variable to give color and other styles. Follow Mixins to reuse a set of styles.

Here is a sample less file.

body {
  .page-node-custom {
    background-color: @black;
  }
}

.CustomBorders (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

header {
  .CustomBorders(6px);
}

.button {
  .CustomBorders(8px);
}

For more information about LESS go to lesscss.org

Thank you for reading this article and hope you have got something new from it.