Define custom colors in visual studio? - css

Question

In visual studio I can type "blue" in a CSS value for instance and it will translate it to the appropriate RGB. Is it possible to define custom colors? I'd love to be able to define "companyBlue" or "companyOrange".

Answer 1

Since you're using a CSS file then you shouldn't be using any colornames like Blue, Green,... Because browsers decide for themselves which color value they give to these colors. The color Green might be a completely different color in IE when comparing to Google Chrome.
I'd recommand using hex values instead like:
#000 /* Black */
#fff /* White */
#f00 /* Red */
You can easily get hex values, with this photoshop-like color selector: http://www.2createawebsite.com/build/hex-colors.html
Now, back to your original question, how can you use variablese like companyOrange in CSS? Simply put... with only CSS you cannot use any variables. You however can "store" the value at the top of your CSS file in a comment like so:
/*
COLORS
Black: #000
Company Orange: #f64;
Company grey: #444;
*/
If you really want to use variables instead, you can use a CSS pre-processesor such as SASS, LESS, Stylus,... All of these use variables.
Read more:
http://sass-lang.com/
http://lesscss.org/
http://learnboost.github.com/stylus/

Answer 2

I found this, but don't really love the solution: http://24ways.org/2006/faster-development-with-css-constants/
To truly achieve constants you will need to use something other than
CSS to process the file before it is sent to the browser. You can use
any scripting language – PHP, ASP, ColdFusion etc. to parse a CSS file
in which you have entered constants. So that in a constants section of
the CSS file you would have:
$darkgrey = '#333333';
$darkblue = '#000066';
The rest of the CSS file
is as normal except that when you come to use the constant value you
would use the constant name instead of adding the color:
p { color: $darkgrey; }
Your server-side script could then parse the
CSS file, replace the constant names with the constant values and
serve a valid CSS file to the browser. Christian Heilmann has done
just this for PHP however this could be adapted for any language you
might have available on your server.
Shaun Inman came up with another way of doing this that removes the
need to link to a PHP script and also enables the adding of constants
using the syntax of at-rules . This method is again using PHP and will
require you to edit an .htaccess file.
A further method is to generate static CSS files either using a script
locally – if the constants are just to enable speed of development –
or as part of the web application itself. Storing a template
stylesheet with constant names in place of the values you will want to
update means that your script can simply open the template, replace
the variables and save the result as a new stylesheet file.
While CSS constants are a real help to developers, they can also be
used to add new functionality to your applications. As with the email
address example that I used at the beginning of this article, using a
combination of CSS and server-side scripting you could enable a site
administrator to select the colours for a new theme to be used on a
page of a content managed site. By using constants you need only give
them the option to change certain parts of the CSS and not upload a
whole different CSS file, which could lead to some interesting
results!
As we are unlikely to find real CSS constants under the tree this
Christmas the above methods are some possibilities for better
management of your stylesheets. However if you have better methods,
CSS Constant horror stories or any other suggestions, add your
comments below.