SASS, it makes life so much easier. It gives you the possibility to do magic and then have it rendered as CSS. It allows for variables, it has functions for making rounded corners, gradients, circles and much more.

For me, and I think a lot of people starting with SASS, it was…tricky, and later on important to know what the & is supposed to do and how it can be used.

Consider the following CSS:

.parent .child {
	property: value;
}

This rule will select any element with the class of child inside any element that has the class of parent, and set it’s property to value. Using straightforward CSS, this should be obvious, seeing as it’s a very basic example. Using SASS, we can write the exact same CSS rule like follows and it will compile to the exact same CSS rule:

.parent {
	.child {
		property: value;
	}
}

As you can see, there is no & in the SASS.

Now consider the following CSS:

parent.element.class .child {
	property: value;
}

This rule will select any element with a class of child and a parent called parent and has both class element and class.

Using SASS, we can write the exact same CSS rule like follows and it will compile to the exact same CSS rule:


parent {
	&.element {
		&.class {
			.child {
				property: value;
			}
		}
	}
}

As you can see, this is where the & symbol comes into play. It joins selectors together to make one selector. This is extremely useful for making you code more readable, as it is now possible to use indentations on rules, causing the file to be neater, albeit bigger. But that can easily be sorted out by compiling the SASS into production-ready minified CSS, using you tool of preference (I use and recommend Scout).