Writing consistent and readable CSS that will scale well is a challenging process. Especially when the style sheets are getting larger, more complex, and harder to maintain. One of the tools available to developers to write better CSS are preprocessors. A preprocessor is a program that takes one type of data and converts it to another type of data, and in our case CSS preprocessors are preprocessing languages which are compiled to CSS. There are many CSS preprocessors that front-end developers are recommending and using, but in this article we will focus on Sass. Let’s see what...

LESS,SASS and Stylus are more and more popular among developers. More and more people are using these three tools now. Here we introduce some development and testing tools which can make our development process simpler.SublimeTextMany front-end developers are now using Sublime Text 2 as their main text editor, there are many plugins in Sublime Text as well. We can use Ctrl+Shift+P –> install package to search relative plugins.Less SublimeLess build SublimeLess2cssLess snippetsSublime text haml sassSASS-Build-SublimeText2StylusEmmet--Integrated with less、sass、scss etc，...

Sass is one kind of CSS Preprocessor, it can make CSS development simple and maintainable. But to show its real power we may need to have Compass.This article is to introduce Compass. Once you learn Compass, your CSS development efficiency will be largely improved.Here we assume you have mastered the major uses of CSS, if you know Sass, then it's better. It's still ok if you don't know Sass.1. What is Compass?In simple, Compass it the toolkit of Sass.Sass itself is only a compiler, Compass encapsulates some templates and modules based on Sass. The relationship between Sass and Compass is simil...

If you learned CSS before, you should know that CSS is not a programming language. You can use it to design webpage style, but you cannot use it for programming, i.e, CSS is what designer uses, not what programmer uses. Programmer may think that CSS is very troublesome, it has no variables, no conditional statements, it just allows line-by-line description of HTML elementsLuckily, CSS preprocessor appear which makes CSS programmable. The general idea of CSS preprocessor is using a programming language to design the website style, and then convert it to CSS files.Among different CSS preprocesso...