futekov / csspre Goto Github PK

There are a lot of things you could do with objects/hashes/maps, at least Stylus and Sass have them: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#maps aтd http://learnboost.github.io/stylus/docs/hashes.html

There are a lot of nuances in working with objects both in Stylus and Sass, so it wouldn't be a short post, haha.

As we just had shipped support for source maps to Stylus 0.48.0, it would be cool to do a comparison between Sass, Less and Stylus. I guess that can be a rather big task, but it could all start with the basic usage comparison and then could be updated regularly.

Write an article about how conditional expressions work in the 3 big preprocessors.

Should include the syntaxes for standard if/else conditions (guards in less) and for ternary operators (inline conditionals).

It'll be good to have disqus comments below each blog post.

It says that only Stylus can test if a color is light or dark. Sass should be changed from "Not Available" (Red X) to say "Requires Custom Function" (Yellow Check):

@function set-notification-text-color($color) {
  @if (lightness($color) > 50) {
    @return #000000; // Lighter backgorund, return dark color
  } @else {
    @return #ffffff; // Darker background, return light color
  }
}

• http://thesassway.com/intermediate/dynamically-change-text-color-based-on-its-background-with-sass

There are a lot of places where you could use interpolations in different preprocessors, it would be a nice thing to compare and document.

http://sass-lang.com/documentation/Sass/Script/Functions.html#hsl_functions

hue($color)
saturation($color)
lightness($color)

At least Stylus allows you to iterate through objects, I wonder if Sass allows this for the maps as well? And are there objects in Less at all?

Add schema.org data for:

• author
• time
• type of page

Add article(s) on how mixins work, should cover:

• simple mixins
• parametric mixins

Add a grunt task to minify scripts, markup, etc.

jQuery is a huge overkill for the current 1 script, write it in vanilla JS.