Syntactically AWESOME Stylesheets: An Intro to Sass

Sass logoAs a web designer, you may have come across design blogs, tutorials, and job listings that mention Sass. And you may have left it in the pile of web-dev jargon to look into later. But Sass is not a technology that you want to miss.

Sass (Syntactically Awesome StyleSheets) is a CSS preprocessor, a tool made to advance your CSS styling making your code easier to read and easier to edit, plus add a world of powerful features. (There are actually several CSS preprocessors out there. Two other popular ones are Less and Stylus.)

CSS preprocessors have arisen to popularity in the last decade as some web developers have become frustrated with the limitations of CSS. Sass was first released in 2007. It was developed from another language, Ruby, but uses the same syntax as regular CSS. Sass’s .scss files compile into .css for delivery. Let’s check out some capabilities of Sass’s syntax.

Features

Variables

With variables, you can set a value like a color or font and refer to it when needed. Then if you need to change the value, you only have to change it once, and your whole document is set.

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Nesting

Sass allows you to nest your CSS selectors, just like HTML.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Inheritance via @Extend

Sass’s @extend feature allows you reference the CSS properties of a previous selector and apply them to following selectors.

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

Mixins

Mixins allow you to re-use chunks of CSS that you find yourself using often. You can even include variables to make them more flexible. Mixins are especially useful when dealing with vendor prefixes.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
       -o-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

Benefits

As you can see, Sass provides a way for some incredibly powerful features to benefit your website production. It provides a simpler syntax that is much easier to read and write. Sass can also help boost your website’s performance (if done right) with cleaner code, wider browser compatibility, and faster load times. Also, Sass improves your workflow, helping you develop more efficiently.

Drawbacks

There are some drawbacks to using Sass and CSS preprocessors alike. Just like any other language, Sass can be abused, bloating your code and complicating your workflow (See some problems in this critical article). It is a syntax with its own best-use standards to be mastered and bug-fixed. It is important to realize that these tools should never be a substitute for good architecture. In fact, experienced developers recommend that you get comfortable with CSS before diving into preprocessors.

Also, Sass is somewhat mutually exclusive, meaning you can’t work on the same stylesheets with another coder who writes in traditional .css files. (But of course, Sass works magically if your whole team uses it in the workflow.)

Resources

To learn more about Sass, you can visit the website sass-lang.com. Or you can watch video tutorials by  LevelUpTuts on YouTube, or by paid tutorial websites like Lynda.com or Drupalize.me.

Sass and pre-processors may not be for everybody. Many professionals are using Sass or other CSS preprocessors to optimize their project workflow. While CSS may obtain similar features as preprocessors in the future (but not too soon), Sass and CSS Preprocessors can boost your workflow, so I definitely recommend trying it out.

Becoming a Change Agent in Design & Web Technology

In this age of the internet where everything is always being updated and revised, it’s difficult to keep up with the latest without getting frustrated. That is why we need more change agents.

What Is A Change Agent?

A change agent is a person who has a firm vision of a better future and helps lead others into that. A change agent is very much a catalyst, helping people reach their goals.

Steve Jobs introduces the first iPhone

Steve Jobs is a prime example of a change agent in the web technologies field. Jobs fought for the user experience more than anything else. He pushed Apple to create industry-altering products: the Macintosh, iPod, iPhone, and iPad. These products transformed the internet world.

Looking At The Future of Web Technologies

What upcoming products and technologies will impact the worldwide web? And how can businesses, both great and small, take advantage of them?

Video Cameras & Internet Video – More than 1 billion users visit YouTube every month. Video is naturally engaging and easily consumed. Camera technology is advancing to produce greater picture and sound quality for less money, allowing access to low-budget businesses and filmmakers. People can share about their products and ideas like they never have before. Video enhances a business’s internet presence informing people in an entertaining way.

SmartPhones & Tablets – Smartphones and tablets will increasingly become universally used for average consumer use, phasing out stationary desktop computers. These devices are also becoming more and more powerful to handle intense tasks and graphics. Web content is being consumed on smartphones, making it necessary for businesses to provide device-friendly content with designs that are responsive to different screen sizes and device needs.

How Can I Be A Change Agent In Web Technologies?

I can be a sort of change agent by helping businesses jump in and adapt in the expanding world of digital media. I can help them produce videos to share their story and promote their products and services. I can also help them prepare and refine their website for smartphones and tablets to ensure that visitors have a pleasant experience. I can provide these services to help people reach their goals.