Getting into SASS

As a developer I see CSS as a language made for designers. I don’t get comfortable with this topic.

That’s why I gave SASS a try and I must admit, it’s easy to use. One can use variables, calculate and include different files easily. Here is a small example taken from the SASS website.

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

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

In cooperation with the Koala Editor one can use about every code edtior available. Koala supports the following languages: Less,Sass, CoffeeScript and Compass Framework.

Here are the TOP6 benefits:

  1. variables like php
  2. nesting like javascript blocks
  3. imports of external scss files
  4. mixins with functions
  5. inheritance of attributes
  6. calculations

What I like most is the nesting feature. The elements are easier to find and the SASS processing is cleaning up the mess. So one can concentrate on writing readable and maintainable style code.

Example:

// avoids duplicated code
.listAppeal {
  margin: 0;
  padding: 0;
  list-style: none;
}

body {
  nav {
    ul {
      @extend .listAppeal;
    }

    li { display: inline-block; }

    a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
    }
  }
}

When you have seen and used CSS before. Getting started with SASS maybe takes about 60 minutes. With the use of Koala all processed CSS files can be generated automatically after saving the scss files.

Have fun trying…

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s