Currently, Sass is the most popular CSS preprocessor among web developers. It allows you to introduce programmatic logic to your CSS code and make use of advanced features such as variables, mixins, functions, inheritance, nesting, and others. Mixins are probably the most popular feature of Sass, as they let you create groups of CSS declarations that you can easily reuse whenever you need. With mixins, you can save a lot of time, avoid repetitions, and make your code more readable. In this article,...
Good vertical rhythm on a website has numerous benefits: aesthetically the design will appear more balanced and polished; for the reader, the content will be more cohesive and easier to read. If you’ve ever read a content heavy website and found it hard for your eyes to jump to the start of the next line, it was probably due to a poor vertical rhythm. In the old days of print design, vertical rhythm was set using font sizes, line heights, margin and paddings, set in point (pt) size units. Today the same styling...
There are a whole host of Sass mixin libraries out there: Bourbon is a personal favourite, Compass is hugely popular. But sometimes, actually always, it’s better to pick and mix your mixins to suit yourself. It’s never good to rely too heavily on a tool, and if you think Sass mixins begin and end with the @include statement then you should probably try writing out a few of your own. Sass mixins are available for a huge range of tasks, here’s 15 that no developer should be without: box-sizing...
In this post, we are going to explore open source fonts and CSS pre-processing. I am going to give you an easy way to add web fonts to any website in just a few lines of code. What are Google Fonts? ... Google Fonts makes it quick and easy for everyone to use web fonts. Google Fonts is a collection of open source fonts that are hosted on Google's servers and with their API, it is easy for anyone to integrate their fonts into any web project. Best of all, it's free. (To learn more and explore the hundreds of fonts available,...
If there is one thing a language needs to qualify as a programming language, it’s variables; they’re incredibly useful, save us a bunch of work and typing, and improve coding all-round. This is exactly what CSS didn’t have. Pre-processors like Sass and Less used them, but vanilla CSS never had variables. Until now. They’ve been on the horizon for a while, but only recently have variables started to be implemented in CSS, let’s take a look at how they work. Browser support ... Currently CSS...
If you have started to dive into the wonderful world of CSS preprocessors (LESS or Sass), you might have also heard of Compass. If you haven't decided on either LESS or Sass, I would make the investment and learn one, or both, of the technologies. It's well worth the time and will make your coding and development life a lot easier. Today, we're going to look at Compass, an open-source CSS authoring framework built on Sass. Similar to Sass, it is installed via the command line (Terminal in Mac OS X) and is run...
In my last post, I introduced Sass (Syntactically Awesome Stylesheets) and getting Sass set up on your machine by installing Ruby, installing Sass, watching a file and compiling via Terminal. Now, we will look at a much simpler way to get set up with Sass. CodeKit. I'll be upfront, I'm a user of CodeKit and I recommend the software to any web developer who works in Sass, LESS, Compass, JavaScript, or any other web language, however neither I nor Developer Drive has any relationship (personal or financial)...
I recently completed a seven part series on Learning LESS, and we had a lot of commenters who requested a similar series on Sass (Syntactically Awesome Stylesheets). While there is a lot of discussion out there as to whether or not LESS or Sass is better, both have their place, both accomplish the same overall goal, and both can make your life (and your coding) much simpler and easier. What is Sass? ... Sass, which stands for Syntactically Awesome Stylesheets, is a "meta-language on top of CSS that’s...