Keeping up with the SASS techniques in the video, one would end up with a CSS code structure like this:
header {}
[...]
@media A {
header {}
}
@media B {
header {}
}
section[role="main"] {}
[...]
@media A {
section[role="main"]{}
}
@media B {
section[role="main"]{}
}
footer {}
[...]
@media A {
footer {}
}
@media B {
footer {}
}
He’s trying, with the help of SASS, to explain/pass along others idea as to how it would make much more sense to keep media rules separate for every element involved, rather than grouping all media rules for a common expression into the appropriate separate file or section of the document.
I strongly disagree. And involving SASS it doesn’t make the idea a bit more attractive. In real life development, a more suited code structure is this:
header {}
section[role="main"] {}
footer {}
@media A {
header {}
section[role="main"] {}
footer {}
}
@media B {
header {}
section[role="main"] {}
footer {}
}
If I was to try to convince established CSS developers to go for SASS, I’d point them out articles like this one:
As far as SASS and mixins are concerned, this is what I believe to be a useful application in real life development:
@mixin border-radius($radius) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
A “simplified border-radius mixin” that demonstrates how you can “use the new CSS3 border-radius attribute in a succinct way”:
a.button {
background: black;
color: white;
padding: 10px 20px;
@include border-radius(5px);
}
A simple to grasp and powerful example showing what advantages SASS brings to the table:
- keeping your main code simple, DRY, future proof
- means to hide the ugliness of the non-standard
It’s also fair to mention that COMPASS it’s not the only comprehensive library of SASS mixins:
https://github.com/MatthieuA/Sass-Css3-Mixins
https://github.com/v-sorokin/sass-mixin-library
and a few more.
To reiterate my SASS-first parallel with Ruby and its Rails framework, like with Rails, COMPASS is not the SASS’s only way to exist.
If one manages RWD without frameworks like 320andup, certainly one would manage to efficiently use SASS without COMPASS.
I, for one, don’t use COMPASS, and I’m managing perfectly fine SASS without it.
Off Topic:
“It’s Not A Bug, It’s A Feature!”