00:00
2973
More
See all Show me
Video of the talk I gave at PyWeb-IL #22 on 27 Dec 2010. Slides online at slideshare.net/idangazit/css-extenders

Credits

Likes

  • Chris Eppstein 1 year ago
    Great talk!

    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.
  •  
  • dave 1 year ago
    Ummmmm ummmmmm
  •  
This conversation is missing your voice. Take five seconds to join Vimeo or log in.

Advertisement

About this video

MP4
00:49:33
  • 640x480, 210.89MB
  • Uploaded Thu December 30, 2010
  • Please join or log in to download

Statistics

Date Plays Comments
Totals 392 6 2
Feb 23rd 0 0 0
Feb 22nd 1 0 0
Feb 21st 0 0 0
Feb 20th 0 0 0
Feb 19th 1 0 0
Feb 18th 0 0 0
Feb 17th 0 0 0