
CSS Extenders
1 year ago
Video of the talk I gave at PyWeb-IL #22 on 27 Dec 2010. Slides online at slideshare.net/idangazit/css-extenders
-
Vimeo: About / Blog / Developers / Jobs /
Community Guidelines /
Help Center / Video School / Music Store / Site Map
/ Vimeo
or
-
Legal: TM + ©2012 Vimeo, LLC. All rights reserved. / Terms of Service / Privacy Statement / Copyright

Prev week
Here's some answers to some of the questions not answered in the talk, a few corrections, and some explainations:
1. The indented (original) sass syntax is not deprecated.
2. The ruby version of less is reviewed in this talk. That version is deprecated and the new version is actually javascript based built on top of node.js on the server or it can be ran in the browser. That version is still under development, but it does have the color functions that sass provides now.
3. the @extend directive is different from @include in that it changes selectors instead of copying the contents. E.g.
.feedback { border: 1px solid black; font-weight: bold; }
.error { @extend .feedback; border-color: red; color: red; }
Becomes:
.feedback, .error { border: 1px solid black; font-weight: bold; }
.error { border-color: red; color: red; }
this approach to inheritance can often yield more compact output that more closely resembles hand generated CSS in the output, but being more easily maintained.
4. Sass does not allow forward references except in the case of inheritance using @extend because that is done in a second pass by the sass compiler.
5. CSS directives (@-rules) are instructions to the CSS parser that tell it how to process the file and in CSS3 they are increasingly used to represent new namespaces like font family names. This is why Sass uses directives for higher order abstractions. Variables do not exhibit this property, they are a more simple form of abstraction which is why sass prefers the more familiar $ sign for variables.
6. Sass keeps the concepts of inheritance and inclusion distinct, while less merges them into one. That is why Sass has @include for only @mixin. Mixins do not have a selector, only a name and they exist for the concept of inclusion. This is because the names in your output stylesheet should belong to your application, so libraries like compass provide an implementation without css representation until you include them. This is a critical aspect for libraries (css frameworks) because a framework contains a lot of things you don't need, so you must have the ability to select what is generated or not. This is one of a few key reasons why Compass can exist on top of Sass but is not viable using Less.
7. Sass has output debugging via comments and the @debug directive and @warn directive. It also has firebug integration with "FireSass".
8. CSS Comments (/* ... */) are only stripped out in "compressed" output mode. Sass comments (// ...) are never in the output.