CSS, Sass

Start using Sass

I really wanted to point out the reasons why web developers should start using Sass and I came across the Clean out your Sass junk drawer slides by Dale Sande. It shows just how much the thought process of well structured CSS has changed over the years. So if you still work with fellow front-end web developer/engineers who aren’t using any CSS Preprocessor, point them to these slides.

//speakerdeck.com/assets/embed.js

Standard
CSS, Preprocessor, Sass

Features of Compass

“Compass is an open-source CSS Authoring Framework.” – Compass

“Compass can do some really handy tasks like measuring images from the filesystem and writing them into your stylesheets. Asset URL functions are available that make it easy to move assets around in a project or even switch to a content delivery network (CDN) without having to rewrite your stylesheets. Compass can even combine a directory of images into a single sprite image and do the otherwise tedious task of calculating coordinates and writing the spriting CSS for you.” – Sass and Compass in Action (Manning)

Continue reading

Standard
CSS, Sass

Learning Sass

What is Sass?

“Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.” – Sass

To install Sass, read the official Sass guide or if you’re trying to install Sass at your workplace and have issues due to your network firewall, read my previous blog post.

There are numerous ways to compile Sass. There’s the Command Line/Terminal or GUI’s such as Koala, Scout, Prepos and Codekit. Read the official Sass guide on the best way to compile your Sass to CSS.

Continue reading

Standard
Sass, Workflow Tools

Sass, Command Line and a Firewall

After a year off from work (I was on maternity leave) I’m finally getting a chance to catch up on what I’ve missed from the Web Development community. One of which is CSS Preprocessors which has been around for a few years now. I won’t go into the details to describe what it is so I’ve listed a few popular and most used CSS Preprocessors.

After reading about CSS Preprocessors I’ve decided to explore and experiment with Sass based on these reasons:

“Sass makes it easier to write less CSS codes and manipulate them dynamically. It’s a great way to write more functional CSS codes and can speed up the workflow of every web developer and designer” – from 1st Web Designer

“It’s a way to simplify your CSS workflow, making development and maintenance tasks easier. For instance, have you ever had to do a find-and-replace in your stylesheet to change a particular HEX color for a particular indecisive client? Or had to open up the calculator app to figure out a column width in a multi-column design? Sass introduces new concepts such as variables, mixins, nestings and selector inheritance” – from Treehouse Blog

Continue reading

Standard