This week, I started re-working Ghost-UI – the user-interface side of Ghost. Of course, it’s open source, so please feel free to contribute in any way you can. I intend to make a load of issues on Github in the next few days so everyone is on the same page and can offer PR’s where desired.
To start off, I have restructured the files and folders, with the hope that the codebase is less daunting for people to get involved in. I will blog about that at some point soon.
The next step was a
variables.scss file, in which is a set of colour variables, used throughout the project. Before, there were no classes available to simply set the colour of an elements text or background. I know these classes are useful – especially when Ghost Apps are ready to go – so I’ve added some to the project.
But rather than write out two classes for each colour (for which there are 11, not the 4 shown below), I wanted to make the code as DRY as I could, which meant some form of loop.
Below is how I’ve achieved this in Sass. First, we have the colour variables.
Second, we have the list of colours, which is comprised of two parts. The first attribute is the string we want to use as a selector, the second attribute is the corresponding colour variable which we previously declared.
In another file where a lot of other base styles and classes are defined, we have this. It loops over the list of colours we declared earlier and creates 2 classes for each.
This is the compiled CSS. See why I wanted to make this DRYer when writing it?
This approach means than when adding new colours to the list, they automatically get two classes generated for them. And if you don’t want a class for this colour, leave it out of