HTML5 Zone is brought to you in partnership with:

Hi all, my name is Hubert A. Klein Ikkink. Not a very common name, right? To make things easier I just picked the first letters of my firstname and surname and came up with haki. So there you have it, now I am also known as Mr. Haki or mrhaki for short. You can read more blog postings at www.mrhaki.com. I am a passionate Groovy and Java developer based in Tilburg, The Netherlands. My goal is to write clean, elegant, user-centered and high quality software. You can find me on Google+ and Twitter. Hubert is a DZone MVB and is not an employee of DZone and has posted 167 posts at DZone. You can read more from them at their website. View Full User Profile

Sass Snippets: Compact Syntax for Nested Properties

02.17.2013
| 2303 views |
  • submit to reddit

In CSS we can see properties that start with the same name, followed by a hyphen and then the rest of the name. For example we have the padding-top, padding-right, padding-bottom and padding-left properties. We can use the shorthand syntax in this case (padding: 0 0 10px 20px;) or we type each property with the complete name:

padding-top: 0;
padding-right: 0;
padding-bottom: 10px;
padding-left: 20px;

With Sass we can use a different syntax for these kind of properties. We only have to define the common part of the property name and in a block we can define the specific properties. The name is followed by a colon (:) instead of a hyphen (-). In the following sample we define a couple of text- and padding- properties:

// nested-properties.scss

h1 {
    text: {
        align: 'left';
        transformation: 'capatalize';
        indent: 20px;
    }
}

p {
    // Simple variable for padding.
    $padding: 20px;
    
    padding: {
        left: $padding;

        // Calculate with padding variable:
        bottom: $padding / 2;
    }
}

This results in the following CSS:

h1 {
  text-align: 'left';
  text-transformation: 'capatalize';
  text-indent: 20px;
}

p {
  padding-left: 20px;
  padding-bottom: 10px;
}

Samples written with Sass 3.2.5

Published at DZone with permission of Hubert Klein Ikkink, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)