CSS with LESS?

Hello, i am usually tweaking a lot the themes I buy, and already with not so big themes I always wonder why the CSS code must be so complicated written. If I want to change the color of headlines – all headlines on the whole site – I have to define so many things if I don’t want to be so rude to use !important all over. Well, your theme panel offers this now, but it was just an example.

Now Newspaper has the largest style.css I’ve ever seen: 25.000+ lines!
If I want to change the whole site to simply two fonts, I don’t even want to count on how many wheels I have to turn to get this done … seems like an impossible task.

But I must admit that until that day I didn’t get my feet into LESS and SASS, so I wonder if you yourself would put such a burden of CSS on your own few shoulders, or if that 25’+ are the mere result of some simple LESS programming which actually makes things more simple than complicated.

So, am I wrong with the feeling that you made theme adaption a real pain for your clients, or would it just be a pain for old-style non-LESS user as me? Then the moment has come for me to mess less and learn LESS. Can I adapt your theme more easily, e.g. how would I change all instances of Roboto without going crazy in style.css?

Thank you.

Looks quite easy to change the font in such a way 🙂
Do I need to learn LESS or software or can I change this somewhere simply in a file?

Hello Emil,

this is how I work, but whenever I use a new module in the future, I need to always adapt the design again, which is not a very efficient way and I would like to improve this workflow.

I want to replace the darkgrey color #222 anywhere on my page with the main color of the project which is blue, and I could simply replace that ONE line in less and it would be done. Is there a way for me to do so, or are the less things just for you during the development period?

Also you could think about integrating those variables into the panel, at least the four main fonts and the #222 are of a major design importance right at the fundament and you would save your clients tons of CSS child work. I think it is worth pondering about such a designer-friendly aspect.

I thank you already here and wish you all great days before describing an alternative idea of mine below 🙂

——————————-

An alternative that came to my mind that doesnt require less but works with child css would be to catch all instances of e.g. #222 or ‘roboto’ using a script that goes through the whole style.css and extracts all the classes and id’s in which the search term appears. I guess with RegEx this can be achieved, but also with RegEx I don’t know enough to write such a script. In case one of you has the knowledge and a bit of time left to create such a script, it would be very useful not only for myself. I describe the logic behind, maybe an expert will immediately see the regex string appearing before his eyes 🙂

So I need a script that collects all classes to which e.g. Roboto is assigned. Basically it needs to
1. find Roboto, then
2. go back to the { and
3. collect everything before that { until
4. the last } before, so it needs to go backwards searching
5. it needs to take all those classes and id’s it caught and add it to the collection string
6. then it needs to add a comma to the last entry, so the list can continue.

The result will be a very big list of comma-separated classes which I can then easily assign the new font to.