Advanced Sass : online course

Configurable star rating without JS

Star ratings often require a bunch of JavaScript to make them work properly, specially if you want to to able to easily configure them. But did you know you can get pretty far with just Sass and HTML?

Update May 15: Matt Vanderpol tweaked the code to use radio buttons, so you can actually use this in a form. Tim Hartmann was smart enough to leverage the power of CSS selectors, decimating my code :-)

The example below allows you to simply include the rating-container mixin with three arguments: number of stars ($star-count), dimensions of the star ($star-size; we're assuming it's square) and the spacing between stars ($star-spacing). I haven't taken a default state into account, but that could easily be added with some straight-forward CSS classes.

Hover over the stars to see them light up, and remember: this only consists of HTML & CSS! (If you're viewing on a narrow viewport, hit the "Result tab".)

Play with this gist on SassMeister.

If you'd like to see the Sass, compiled CSS and HTML, hit the "Play with this gist on SassMeister" link in the right bottom corner of the code sample above.

The complete Sass source code looks as follows. It's pretty well documented, so I'm not going into further detail now. I'll cover an extended (and a bit more optimized) version of the star rating mixin in a future screencast!

The above is part of the Advanced Sass online course, which helps you turn your Sass up to eleven. You can become a Sass expert too!