How can I reuse a color in a stylesheet?

I have a stylesheet and a lot of styles with the same bor开发者_JAVA百科der color (#CCCCCC to be precise).

Is there a way to specify some kind of variable and reuse that, so instead of typing #CCCCCC over and over, I can type:

border: 1px solid $bordercolor;

P.S. I'm using ASP.NET MVC.

.classA, .classB, .classC {
   border-color: #CCC;
}

.classA {
   border-width: 1px;
   border-style: solid;
}

...

But you can't use the short-hand syntax to define the border anymore.

An element may have multiple classes assigned. So you could create one style that defines you border color and use it in conjunction with other classes for other attributes:

.bordercolor { border-color:#CCCCCC; }

<div class="bordercolor otherstyle">

Not that I'm aware of, but you could generate your CSS from a .NET page.

Then call it with

And StyleSheet.aspx would look something like

<%@ Page Language="C#" %> 
H1 
{ 
  background-color:<%= MyColourVariable %>; 
}

EDIT: However, today I would suggest using LESS or SASS

You could also use a "higher-level" CSS. Sass and Less both offer variables. They work by writing in a language that is a superset of CSS and then you compile it to CSS when you are testing/deploying. There are hooks for RoR for both, there might be one for asp.net.

You can't really define variables in CSS, but you can sort of do what you are after a few ways. First, you could apply multiple classes to your element and just keep color in it's own class.

.myBorderColor { border-color: #000000; }
.myOtherClass { font-weight: bold; }

<div class="myBorderColor myOtherClass">content</div>

The other alternative is to actually cascade your styles so more than 1 block is applied.

div.a { font-weight: bold; }
div.b { color: #cccccc; }

div.a div.b { border-color: #000000; }

That way you are still controlling your color from 1 place.

I think you may be referring to CSS variables. Unfortunately they are not well supported.

You can serve your CSS as a php file with the type text/css. Then that way you can use all the PHP variables you want. This works in every browser. Here is an example:

http://mailmarkup.org/mmlorg.php

A number of folks have done HttpHandlers that add variable support to CSS. Basically, the HttpHandler takes care of replacing the variables with their values before the client sees the CSS. Examples include:

• http://www.devwebprose.com/devwebprose-109-20061016AddvariablestostandardCSSstylesheetsinASPNET.html
• http://www.aspnetresources.com/articles/variables_in_css.aspx

This will certainly work. I have not tried it in any of my applications so I cannot speak to performance implications.

Aside from generating it from a .NET page you could use some sort of pre-processor. There are general use ones such as m4 or CSS specific ones such as LESS.

I was thinking about the T4 template too. It's Visual Studio only i think, so it's not the most generic way to go, but i thought i'd share it.

<#@ template inherits="Microsoft.VisualStudio.TextTemplating.VSHost.ModelingTextTransformation" language="C#v3.5" debug="true" hostSpecific="true" #>
<#@ output extension=".css" #>
<# string font = " font-family: Verdana, Helvetica;\n\tfont-size: 11px;";#>

body { 
    <#= font #>
}
table.Bid {
    background-color:red;
    <#= font #>
}

This generates a test.css file with this content:

body { 
     font-family: Verdana, Helvetica;
    font-size: 11px;
}
table.Bid {
    background-color:red;
     font-family: Verdana, Helvetica;
    font-size: 11px;
}

You could set the border style for a parent tag. For example if every element in your #content uses this border properties you could apply the desired border style to #content itself.

Extend the style within the color is defined

LE: see the sample from KennyTM

In Rails, this works great for me:

http://unixgods.org/~tilo/Ruby/Using_Variables_in_CSS_Files_with_Ruby_on_Rails.html

maybe you could write a similar pre-processor for the .NET framework..?