Build components with Scss

Everybody write, talk or read about OOCSS. A scalable frontend can’t live without it and it’s the best approach for writing clean CSS. A project consists of many modules, which you can use in any environment. It’s not based on your wrapper (layout), because each one works itself.

Since a few weeks Sass 3.3 is out and bring us many new features like Sass Maps. This is the key for building modules.

Build the component

At the  config -section we use the variable $prefix  for the name of module. Mostly we have different types of it and now we need a sass map.  $button-types with much values for the name, background-color and font-color. All separated with a comma.

Now the main part of our module – write your styles here. Loop through all your types and let’s generate it by Scss. So easy.

Play with it on Sassmeister

Play with this gist on SassMeister.

Component with generated font-color

It’s possible to check the background-color and set the font-color for the module automatically. I can’t guarantee that is always perfect, but in my tests it works very well.

$lightenFactor : How much brightness do you want for your font-color?
$darkenFactor: : How much darkness do you want for your font-color?

Play with this gist on SassMeister.

Two components with same base

Sometimes you have two modules like links and buttons with the same base. The colors and classes are the same, but the style is another one. You can create a config for handling both.

Play with this gist on SassMeister.

How do you handle all your modules? Do you have another approach? Let me know it here in the comments, via Mail or at twitter.

Leave a Reply

Your email address will not be published.