Magento Moves into a New Era

 

If you're a hard-core programmer (not into all the design-y stuff), or one of our amazing clients, you may not have noticed that Magento Enterprise Edition 1.14 and Magento Community Edition 1.9 have upgraded to a SASS/Compass framework for responsive websites. Sass is an extension of CSS that adds power and elegance to the basic language, while Compass is a framework that extends SASS; it brings with it a lot of CSS3 mixins and useful CSS stuff.

This has caused a bit a routine change for me. But while it was a short struggle, I'm certainly happy with the shift in productivity. The power of SASS and Compass is unquestionable - practically 1 step colour scheme changes, nested rules, variables, pre-made mixins, etc... And this system will only getter better with more use and familiarity.

For me, one of the strongest developments in this language is nested rules. It makes so much sense, one wonders why CSS wasn't naturally developed this way. Here's a quick, layman's terms, explanation:

Say you have 3 boxes with some styles on each one of them, and they are nested within each other. Here's a diagram to help you out with what I'm saying.

 

Example1

 

.box1 has a teal background, .box2 has a white border, and .box3 has some text in it. I usually wouldn't need to nest rules for a design this simple, but for the sake of keeping this extremely easy to understand, we'll pretend we have to. Here's what the CSS would look like:

/* Styles for box1 */
.box1 {
	background-color: #000;
}

/* Styles for box2 */
.box1 .box2 {
	border: 1px solid #fff;
}

/* Styles for box3 */
.box1 .box2 .box3 {
	color: #49c8f; 
	font-size: 14px; 
	font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
}

 

Notice that to apply style to .box3 I've had to precede it with .box1 and .box2? That's because to get to .box3, I have to tell the computer "hey, I want .box3. It's located inside of .box2, and .box2 is located inside .box1." Looking above, you can see how cumbersome this could get. Check out how the nesting works:

.box1 {
	background-color: #000;

	.box2 {
		border: 1px solid #fff;

		.box3 {
			color: #49c8f; 
			font-size: 14px; 
			font-family: 'Open Sans',  Helvetica, Arial, Sans-Serif;
		}
	}
}

 

You'll notice that .box3 is nested within .box2's curly brackets, which is similarly nested within .box1's curly brackets. Upon saving, this code will go through a compiler which will output that first set of CSS code I showed you. Pretty spiffy, right?

 

If you want to learn more, check out these resources:
Magento Responsive Web Design Developer's Guide
Sass
Compass

 

Leave a Reply