28 May 2015

Twitter bootstrap with SASS

In the last few years, Twitter Bootstrap is found to be the most effective CSS Framework on the web for structuring a website with responsive layout.  There are other CSS preprocessors, such as SASS and LESS,  that are used to develop web applications.They are both CSS based pre-processor languages  but the complexity of app handled by these frameworks are different.

Many UI developers are more familiar with LESS rather than SASS. Though Twitter Bootstrap with LESS is great to produce a very polished looking site in terms of layout, and scalability,reusability and much more, using the SASS version is even better is an argument that other group of UI developers debate about – because you can customize it much more easily.

Let’s explore more in detail why SASS is better than LESS.

Writing reusable methods and using logic statements is what makes SASS extremely powerful ; ie. conditionals and loops. Of course, LESS can do a lot of these things, but in a quite unproductive way. Both SASS and LESS share a common set of built-in functions for colour manipulation, mathematics, and parameter lists.

SASS and its companion library Compass helps CSS write more efficiently. LESS also have some libraries battling to be the best, but SASS libraries has got better performance. For instance, Compass updates will just come automatically in CodeKit, or we can use a Gem which is easy to update, while LESS mixins you’ll have to manually update a file. Features like dynamic sprite-map generation, legacy browser hacks, and cross-browser support in SASS is what makes it great.

In addition, Compass allows users to include third Party Frameworks like Blueprint, Foundation, Bootstrap, Etc by which you can leverage your most desired framework without the mess of using multiple tools.

Things in SASS that cannot be done in LESS:

There are different styles (e.g. recursion in less, iteration in SASS) but these are the features that aren’t yet available in LESS in any form. SASS seem pretty equivalent, the most important difference being in their implementation of extends.
1. @extends
2. placeholders – planned for LESS as extends on mixins
3. variable defaults
4. data-types and handling of lists (limited support to less)
5. @debug and @warn
6. mixin @content blocks
7. function directives – in discussion for LESS (but very low demand)
8. output styles
9. property interpolation
10. auto prefix replacement

Using SASS Functionalities with Twitter Bootstrap

In practical terms, one can simply add Bootstrap classes to HTML elements to create a website layout. However, when using SASS it is also possible to use some of its functions to achieve a more pristine and semantic HTML organization rather than just getting congested with redundant class names.

Most people agree that SASS and bootstrap are a great combination. With Bootstrap a functioning website can be creased in several hours. Further, with features like @extend and @include in SASS, this can help one write more pristine, easy to maintain and programmable CSS.

Using SASS, we can add Bootstrap classes to the HTML elements and make the website layout in more semantic structure rather than being stuffed with meaningless class names. Bootstrap and Sass definitely make a great combo. With Bootstrap, you can build a functioning responsive website in just a few hours. And features in Sass like @extend and @include can help us write leaner, programmable, and maintainable CSS.

Extension of the Grid

When using Bootstrap, you usually insert its class elements and selectors into your mark-up to develop. SASS has one elegant method of erasing the clutter with the SASS @extend directive.

Styling Bootstrap with Variables

If you notice the ./vendor/bootstrap/_variables.sass/ they all appear to have a !default after them. This is an indication that SASS will NOT overwrite this variable once it has already been defined. This will permit you to develop your own personal ./libraries/_variables.sass file. You will be able to include them in the upload order before Bootstrap and hence have effective control of these variables. This will offer you a way to style Bootstrap colors and other options.

Features of SASS:
• Fully CSS3-compatible
• Language extensions such as variables, nesting, and mixins
• Provides better support to write nested media queries
• Many useful functions for manipulating colors and other values
• Advanced features like control directives for libraries
• Well-formatted, customizable output
• Firebug integration
• Syntax

SASS is an excellent scripting language for web app development and using it with Twitter bootstrap makes web development even easier and enjoyable. With Bootstrap, you can build a functioning responsive website in just a few hours. One great thing about SASS is it has built in CSS color math. One can automatically change the color of the menu and the hover state manually. Another great way to use SASS is you can organize all of your CSS into a single file and switching from LESS to SASS also provides a significant increase in CSS compilation speed. It simply adds more power and better organizational tools, making it an easy choice as a go-to replacement. For developers adopting these frameworks, it is essential to understand the paradigm shift these frameworks bring to client side application development.