less or sass and colour schemes

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
Taking a look at these css pre-processors. What I want to do is to be  
able to create and switch colour schemes easily. afaict I can easily  
create variables for the different colours I use in a scheme, or rather  
for the different places I use colours, so I would have say


But I can't for the moment see how I then save the set of variables as a  
scheme or theme. Beginning to wonder if it's going to be worth the  
bother of learning and using the pre-processor.

Less is what I am using. How would you use it to organise changeable  
colour schemes?

Tim W

Re: less or sass and colour schemes

On 3/17/2014 7:19 AM, Tim w wrote:
Quoted text here. Click to load it

I am not sure I am understanding the problem correctly.  I had a site  
with seven different css files, one for each day of the week using php.  
  The only variation was in the color schemes you list.  I have never  
dealt with a css pre-processor.

TK ~ aka Terry Kimpling
Soon to be called "Tricks I could do when I was only 65!"

Re: less or sass and colour schemes

On 17/03/2014 16:53, TK wrote:
Quoted text here. Click to load it
I am not sure I am even posing the question correctly. I could as you  
say just have different css files, but then I would have to alter them  
all if I wanted to alter one. I could extract the color declarations and  
put them in a separate css file but that might make editing confusing.

Less (or any preprocessor) allows you to use variables (which are  
actually constants iiuc) so that you can effectively name colours, which  
in itself is totally pointless unless that colour is used multiple times  
and you want to change it you can do so just by assigning a different  
colour to the name. But my css is small and reasonably well written so  
the colour declarations aren't repeated unecessarily for every element  
at every level of the cascade and my sites might typically only use 3,4  
or 5 colours in total and I can always use 'Find and Replace' so the  
variables themseves are just not going to make a big difference to my  
work unless I can group them together as complete 'themes' or 'schemes'

Ist that a 'mixin' I need? Not by the examples I have seen. Is there  
some other preprocessor function which will do this? Or am I wasting my  

Tim W

Re: less or sass and colour schemes

On 18/03/2014 18:27, Tim w wrote:
Quoted text here. Click to load it


      ...Or am I wasting my
Quoted text here. Click to load it

I had realised that the poeple who post here are very old-school, but  
suprised at the lack of opinions. Maybe these pre-processors are just  
not widely used.

Tim W

Re: less or sass and colour schemes


Quoted text here. Click to load it

Phew... just give me a minute while I get my aged body out of this  
horse and buggy... where's my old stick... ah here... just a minute...  
Jeeves, bring to the house my John Stuart Mills's On Liberty", Ayn  
Rand's "Atlas Shrugged", Barry Goldwater's "The Conscience of a  
Conservative", Alexis de Tocqueville's "Democracy in America", F. A.  
Hayek's "The Road to Serfdom", Ann Coulter's "Mugged", Richard  
Weaver's "Ideas Have Consequences", Milton Friedman's "Free to  
Choose"... now what were we talking about Tim? Oh yes...  

Just for trying our new colour schemes, I have kept a separate css  
file containing colour information that overrides others that are in  
the main one, one that is easy to change. Or I have kept *a few*  
overrides, changing *the order of the links* in the head to enact  
different schemes. Or I have made my colour information sparse and  
easy to change, letting most elements be like clear glass and allowing  
the basic colours to shine through.


Re: less or sass and colour schemes

Quoted text here. Click to load it

I don't know about CSS pre-processors, but I do have a single CSS file
from which I generate two files, one for desktop and one for mobile. I
mark up sections in the source that belong only to one or the other,
and use this PHP script to generate the different versions:

$css = file_get_contents( 'source.css' );

$mouse = preg_replace( array( '/\[mouse\]([^\[]*)\[\/mouse\]/',
'/\[touch\]([^\[]*)\[\/touch\]/' ), array('$1',''), $css );
$touch = preg_replace( array( '/\[mouse\]([^\[]*)\[\/mouse\]/',
'/\[touch\]([^\[]*)\[\/touch\]/' ), array('','$1'), $css );

file_put_contents( 'mouse.css', $mouse );
file_put_contents( 'touch.css', $touch );

Re: less or sass and colour schemes

On 20/03/2014 03:07, Jim T. wrote:
Quoted text here. Click to load it

Site Timeline