less or sass and colour schemes

[Tim w]

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

primary-background-color
footer-background-color
header-background-color
primary-text-color
heading-text-color
footer-text-color
menu-text-color

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

 

[TK]

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

primary-background-color
footer-background-color
header-background-color
primary-text-color
heading-text-color
footer-text-color
menu-text-color

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?

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.

 

[Tim w]

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.

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
time?

Tim W

 

[Tim w]

[snipped]

...Or am I wasting my

time?

Tim W

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

 

[dorayme]

[snipped]

...Or am I wasting my

time?

Tim W

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.

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.

 

[Tim W]

On 17/03/2014 16:53, TK wrote:
On 3/17/2014 7:19 AM, Tim w wrote:
Taking a look at these css pre-processors. ...

[snipped]

...Or am I wasting my

time?

Tim W

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.

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 );

Thanks

 

[airakshar]

Try creating variables that starts with $ (dollar sign), assign any color value that you want and that's it...

$primaryColor: navy;
$secondaryColor: orange;
$textColorDark: white;
$textColorLight: black;
$fontStack: Arial, Helvetica, sans-serif;

You can use the variable throughout the stylesheet wherever you want.

.social {
    background: $secondaryColor;
    padding-bottom: 20px;
    padding-top: 20px;
    color: $textColorDark;
    text-align: center;
    font-family: $fontStack;
    button {
      background: $primaryColor;
      color: $textColorDark;
      font-weight: bold;
      padding: 15px;
      border: none;
      border-radius: 5px;
    }
}

In-fact I've been using Sass to design websites for months now and I'm not going back to CSS anytime soon until there's something worth sacrificing the joy I'm having in Sass .

If you still have anything you got to ask, feel free to post a reply. Else you can read more of Sass here.

 

[sunfighter]

Just save your sass or less definition as a template. You can save a lot more then color.