We are using a framework that allow us to modify the color scheme use throughout the application. I cannot play a lot with the color and would like to reuse them in some classes. So let say that the framework define this class
.StyleFromFramework {
color:#515151;
background-color: #FFFFFF;
}
is located in a css file that I can't modify cause this file is handled by the framework (if I modified this file, all my modification will be lost when the new version of the framework is installed)
I would like to reuse the color of this classes in another class in a file containing all my updates.
.NewStyle {
color: **.StyleFromFramework:color**
Font: Verdan 11 px;
}
Is there a way to do that ?
I would try the following.
.StyleFromFramework, .NewStyle {
color:#515151;
}
.StyleFromFramework {
background-color: #FFFFFF;
}
.NewStyle {
background-color: none; /* or some other value... */
}
The first rule shares the color, and the the other two rules specify properties that are specific to the two other classes.
You should take a look at less.css which does exactly what you're looking for.
perhaps I didn't understand you correctly, but CSS is not dynamic language in which you can reuse rules and components.
I would recommend to use SASS/SCSS framework or something similar (LESS, Stylus... etc.)
In those frameworks, This is one of the most useful features, lets you share a set of CSS properties from one selector to another
read more here: http://sass-lang.com
Using a CSS preprocessor like Sass, Less or Stylus allows the use of variables which then can be reused in your project.
Foundation for instance can be completely restyled with Sass.
Related
Apologies if this question has been asked or if there's a much better way to achieve my objective - I'm very new on the subject.
Using .scss within my React project I have a variable which is used in a number of visual elements as a highlight, eg.:
$theme = red;
.element{
color: $theme;
}
I'd like the user to be able to customize this to suit their tastes within the app client, however it is compiled down by sass-loader/style-loader to something like:
.element{
color: red;
}
which would require me to manually maintain a list of element classes to fire style edits at after the fact.
I am hoping that someone here knows a practical way to achieve what I'm after or, if that doesn't exist, could assist me with modifying sass-loader to also spit out a list of class names where the variable is used to a file that I can load post-compile.
You can use CSS variable instead.
Declare variables:
:root {
--theme-color: red;
}
... and then use it ...
#div1 {
background-color: var(--theme-color);
}
#div2 {
background-color: var(--theme-color);
}
Note: It does not work on Internet Explorer
https://caniuse.com/#search=css%20variables
Learn more about CSS variables
https://www.w3schools.com/css/css3_variables.asp
I am trying to use Bootstrap on a project that encompasses 400+ sites and uses the previous CSS class names (which I have no control over). I've been running into some CSS name clashing and the solution for me is to add a prefix to Bootstrap (.row to .tb-row for example).
I am familiar with the method of adding a namespace using LESS, where an additional class is wrapped around the classes. Unfortunately, this doesn't look like it will solve my issues.
Is there a method via LESS, SASS, or any other compiler that makes it easy for me to add a tb- prefix to all existing classes in Bootstrap?
You could probably do this with SASS
$namespace: "tb";
⌘ + f (or similar) to find all the classes in your CSS file. You're going to probably need a regex (and some trial+error) to find them all.
add .#{$namespace}- to all the classes.
Ideally, you'd get get something like this:
$namespace: "tb";
.#{$namespace}-myClass {
background:pink !important;
}
.#{$namespace}-carousel-module {
width: 25%;
}
compiled to
.tb-myClass {
background:pink !important;
}
.tb-carousel-module {
width: 25%;
}
"Easy" might be a stretch but "easier" seems fitting.
I'm not sure if this is the best approach, in honesty, I'm just ripping off a gist that I saw with comments from people a lot smarter than I am. May come in handy for you though!
You would need to modify the bootstrap code directly, an example of how this could be achieved elegantly in less:
.prefixname {
&-row {
...
}
}
I've added prefix "tb-" to all the bootstrap class (for LESS) in v3.1.0. So after you compile the less files you will get something like ".tb-btn"
You can fork my project at https://github.com/TimothyGuo/tb--prefix-for-Bootstrap-v3.1.0--LESS-
After upgrading our ExtJS 3 application to ExtJS 4 the appearance of some (but not all) components changed. That application uses three CSS files: the original ext-all.css and two own files written many moons ago. These two files seems to be generated and define class-based rules like
.x-menu-group-item .x-menu-item-icon {
background-image: none;
}
.x-menu-plain {
background-color: #fff !important;
}
.x-menu .x-date-picker {
border-color: #AFAFAF;
}
To restore appearance of the application, I could
Rewrite the own two files from scratch.
Keep the files and define new rules for the odd looking components. To do that I have to hand-pick them with Firebug and guess which of the many CSS classes used by the component I have to restyle. That should take days.
Style the application with the new theming support which I don't know yet. That should be the last option because it could take too long. Also I don`t see how the existing CSS file can be imported in SASS.
So, what is the best way to restyle my ExtJS 4 application like the old one?
Edit: I don`t want to write CSS in the code by applying a "style" argument. The CSS files have to take care of styling.
As it turns out, theming is the absolut right way to do this. I managed to restore the most important styles of the application by following this guide-to-custom-themes-in-extjs-4.
Soon I ran into this bug and solved it with downgrading sass to 3.1.1 like it was mentioned here.
To restore most of the design I just had to redefine the following variables in the my-ext-theme.scss:
$grundblau: #b9d7ff;
$panelrandgrau: #D0D0D0;
$panelgrau: #f1f1f1;
$base-color: $grundblau;
$panel-border-color: $panelrandgrau;
$panel-frame-background-color: $panelgrau;
$panel-header-color: #333333;
As you can see, the custom design of the application is actually pretty simple. :)
I’m working on a CSS file that is quite long. I know that the client could ask for changes to the color scheme, and was wondering: is it possible to assign colors to variables, so that I can just change a variable to have the new color applied to all elements that use it?
Please note that I can’t use PHP to dynamically change the CSS file.
CSS supports this natively with CSS Variables.
Example CSS file
:root {
--main-color:#06c;
}
#foo {
color: var(--main-color);
}
For a working example, please see this JSFiddle (the example shows one of the CSS selectors in the fiddle has the color hard coded to blue, the other CSS selector uses CSS variables, both original and current syntax, to set the color to blue).
Manipulating a CSS variable in JavaScript/client side
document.body.style.setProperty('--main-color',"#6c0")
Support is in all the modern browsers
Firefox 31+, Chrome 49+, Safari 9.1+, Microsoft Edge 15+ and Opera 36+ ship with native support for CSS variables.
People keep upvoting my answer, but it's a terrible solution compared to the joy of sass or less, particularly given the number of easy to use gui's for both these days. If you have any sense ignore everything I suggest below.
You could put a comment in the css before each colour in order to serve as a sort of variable, which you can change the value of using find/replace, so...
At the top of the css file
/********************* Colour reference chart****************
*************************** comment ********* colour ********
box background colour bbg #567890
box border colour bb #abcdef
box text colour bt #123456
*/
Later in the CSS file
.contentBox {background: /*bbg*/#567890; border: 2px solid /*bb*/#abcdef; color:/*bt*/#123456}
Then to, for example, change the colour scheme for the box text you do a find/replace on
/*bt*/#123456
Yeeeaaahhh.... you can now use var() function in CSS.....
The good news is you can change it using JavaScript access, which will change globally as well...
But how to declare them...
It's quite simple:
For example, you wanna assign a #ff0000 to a var(), just simply assign it in :root, also pay attention to --:
:root {
--red: #ff0000;
}
html, body {
background-color: var(--red);
}
The good things are the browser support is not bad, also don't need to be compiled to be used in the browser like LESS or SASS...
Also, here is a simple JavaScript script, which changes the red value to blue:
const rootEl = document.querySelector(':root');
root.style.setProperty('--red', 'blue');
CSS itself doesn't use variables. However, you can use another language like SASS to define your styling using variables, and automatically produce CSS files, which you can then put up on the web. Note that you would have to re-run the generator every time you made a change to your CSS, but that isn't so hard.
You can try CSS3 variables:
body {
--fontColor: red;
color: var(--fontColor);
}
There's no easy CSS only solution. You could do this:
Find all instances of background-color and color in your CSS file and create a class name for each unique color.
.top-header { color: #fff; }
.content-text { color: #f00; }
.bg-leftnav { background-color: #fff; }
.bg-column { background-color: #f00; }
Next go through every single page on your site where color was involved and add the appropriate classes for both color and background color.
Last, remove any references of colors in your CSS other than your newly created color classes.
The 'Less' Ruby Gem for CSS looks awesome.
http://lesscss.org/
Yes, in near future (i write this in june 2012) you can define native css variables, without using less/sass etc ! The Webkit engine just implemented first css variable rules, so cutting edge versions of Chrome and Safari are already to work with them. See the Official Webkit (Chrome/Safari) development log with a onsite css browser demo.
Hopefully we can expect widespread browser support of native css variables in the next few months.
Do not use css3 variables due to support.
I would do the following if you want a pure css solution.
Use color classes with semenatic names.
.bg-primary { background: #880000; }
.bg-secondary { background: #008800; }
.bg-accent { background: #F5F5F5; }
Separate the structure from the skin (OOCSS)
/* Instead of */
h1 {
font-size: 2rem;
line-height: 1.5rem;
color: #8000;
}
/* use this */
h1 {
font-size: 2rem;
line-height: 1.5rem;
}
.bg-primary {
background: #880000;
}
/* This will allow you to reuse colors in your design */
Put these inside a separate css file to change as needed.
Sure can, sort of, thanks to the wonderful world of multiple classes, can do this:
.red {color:red}
.blackBack {background-color: black}
but I often end up combining them anyway like this:
.highlight {color:red, background-color: black}
I know the semantic police will be all over you, but it works.
I'm not clear on why you can't use PHP. You could then simply add and use variables as you wish, save the file as a PHP file and link to that .php file as the style sheet instead of the .css file.
It doesn't have to be PHP, but you get what I mean.
When we want programming stuff, why not use a programming language until CSS (maybe) supports things like variables?
Also, check out Nicole Sullivan's Object-oriented CSS.
You can group selectors:
#selector1, #selector2, #selector3 { color: black; }
You could pass the CSS through javascript and replace all instances of COLOUR1 with a certain color (basically regex it) and provide a backup stylesheet incase the end user has JS turned off
dicejs.com (formally cssobjs) is a client-side version of SASS. You can set variables in your CSS (stored in json formatted CSS) and re-use your color variables.
//create the CSS JSON object with variables and styles
var myCSSObjs = {
cssVariables : {
primaryColor:'#FF0000',
padSmall:'5px',
padLarge:'$expr($padSmall * 2)'
}
'body' : {padding:'$padLarge'},
'h1' : {margin:'0', padding:'0 0 $padSmall 0'},
'.pretty' : {padding:'$padSmall', margin:'$padSmall', color:'$primaryColor'}
};
//give your css objects a name and inject them
$.cssObjs('myStyles',myCSSObjs).injectStyles();
And here is a link to a complete downloadable demo which is a little more helpful then their documentation : dicejs demo
EDIT: This answer is no longer current. You should use CSS variables now.
Consider using SCSS. It's full compatible with CSS syntax, so a valid CSS file is also a valid SCSS file. This makes migration easy, just change the suffix. It has numerous enhancements, the most useful being variables and nested selectors.
You need to run it through a pre-processor to convert it to CSS before shipping it to the client.
I've been a hardcore CSS developer for many years now, but since forcing myself to do a project in SCSS, I now won't use anything else.
If you have Ruby on your system you can do this:
http://unixgods.org/~tilo/Ruby/Using_Variables_in_CSS_Files_with_Ruby_on_Rails.html
This was made for Rails, but see below for how to modify it to run it stand alone.
You could use this method independently from Rails, by writing a small Ruby wrapper script
which works in conjunction with site_settings.rb and takes your CSS-paths into account, and
which you can call every time you want to re-generate your CSS (e.g. during site startup)
You can run Ruby on pretty much any operating system, so this should be fairly platform independent.
e.g. wrapper: generate_CSS.rb (run this script whenever you need to generate your CSS)
#/usr/bin/ruby # preferably Ruby 1.9.2 or higher
require './site_settings.rb' # assuming your site_settings file is on the same level
CSS_IN_PATH = File.join( PATH-TO-YOUR-PROJECT, 'css-input-files')
CSS_OUT_PATH = File.join( PATH-TO-YOUR-PROJECT, 'static' , 'stylesheets' )
Site.generate_CSS_files( CSS_IN_PATH , CSS_OUT_PATH )
the generate_CSS_files method in site_settings.rb then needs to be modified like this:
module Site
# ... see above link for complete contents
# Module Method which generates an OUTPUT CSS file *.css for each INPUT CSS file *.css.in we find in our CSS directory
# replacing any mention of Color Constants , e.g. #SomeColor# , with the corresponding color code defined in Site::Color
#
# We will only generate CSS files if they are deleted or the input file is newer / modified
#
def self.generate_CSS_files(input_path = File.join( Rails.root.to_s , 'public' ,'stylesheets') ,
output_path = File.join( Rails.root.to_s , 'public' ,'stylesheets'))
# assuming all your CSS files live under "./public/stylesheets"
Dir.glob( File.join( input_path, '*.css.in') ).each do |filename_in|
filename_out = File.join( output_path , File.basename( filename_in.sub(/.in$/, '') ))
# if the output CSS file doesn't exist, or the the input CSS file is newer than the output CSS file:
if (! File.exists?(filename_out)) || (File.stat( filename_in ).mtime > File.stat( filename_out ).mtime)
# in this case, we'll need to create the output CSS file fresh:
puts " processing #{filename_in}\n --> generating #{filename_out}"
out_file = File.open( filename_out, 'w' )
File.open( filename_in , 'r' ).each do |line|
if line =~ /^\s*\/\*/ || line =~ /^\s+$/ # ignore empty lines, and lines starting with a comment
out_file.print(line)
next
end
while line =~ /#(\w+)#/ do # substitute all the constants in each line
line.sub!( /#\w+#/ , Site::Color.const_get( $1 ) ) # with the color the constant defines
end
out_file.print(line)
end
out_file.close
end # if ..
end
end # def self.generate_CSS_files
end # module Site
Not PHP I'm afraid, but Zope and Plone use something similar to SASS called DTML to achieve this. It's incredibly useful in CMS's.
Upfront Systems has a good example of its use in Plone.
If you write the css file as an xsl template, you could read color values from a simple xml file. Then create the css with an xslt processor.
colors.xml:
<?xml version="1.0"?>
<colors>
<background>#ccc</background>
</colors>
styles.xsl:
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="text" version="1.0" encoding="iso-8859-1"/>
<xsl:template match="/">body {
background-color: <xsl:value-of select="/colors/background" />;
}
</xsl:template>
</xsl:stylesheet>
Command to render css: xsltproc -o styles.css styles.xsl colors.xml
styles.css:
body {
background-color: #ccc;
}
It’s not possible with CSS alone.
You can do it with JavaScript and LESS using less.js, which will render LESS variables into CSS live, but it’s for development only and adds too much overhead for real-life use.
The closest you can come with CSS is to use an attribute substring selector like this:
[id*="colvar-"] {
color: #f0c69b;
}
and set the ids of all your elements that you want to be adjusted to names starting with colvar-, such as colvar-header. Then when you change the color, all the ID styles are updated. That’s as close as you can get with CSS alone.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Avoiding repeated constants in CSS
We have some "theme colors" that are reused in our CSS sheet.
Is there a way to set a variable and then reuse it?
E.g.
.css
OurColor: Blue
H1 {
color:OurColor;
}
There's no requirement that all styles for a selector reside in a single rule, and a single rule can apply to multiple selectors... so flip it around:
/* Theme color: text */
H1, P, TABLE, UL
{ color: blue; }
/* Theme color: emphasis */
B, I, STRONG, EM
{ color: #00006F; }
/* ... */
/* Theme font: header */
H1, H2, H3, H4, H5, H6
{ font-family: Comic Sans MS; }
/* ... */
/* H1-specific styles */
H1
{
font-size: 2em;
margin-bottom: 1em;
}
This way, you avoid repeating styles that are conceptually the same, while also making it clear which parts of the document they affect.
Note the emphasis on "conceptually" in that last sentence... This just came up in the comments, so I'm gonna expand on it a bit, since I've seen people making this same mistake over and over again for years - predating even the existence of CSS: two attributes sharing the same value does not necessarily mean they represent the same concept. The sky may appear red in the evening, and so do tomatoes - but the sky and the tomato are not red for the same reason, and their colors will vary over time independently. By the same token, just because you happen to have two elements in your stylesheet that are given the same color, or size or positioning does not mean they will always share these values. A naive designer who uses grouping (as described here) or a variable processor such as SASS or LESS to avoid value repetition risks making future changes to styling incredibly error-prone; always focus on the contextual meaning of styles when looking to reduce repetition, ignoring their current values.
You can achieve it and much more by using Less CSS.
No, but Sass does this. It's a CSS preprocessor, allowing you to use a lot of shortcuts to reduce the amount of CSS you need to write.
For example:
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color:
darken($blue, 9%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}
Beyond variables, it provides the ability to nest selectors, keeping things logically grouped:
table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weight: bold;
size: 1.2em;
}
}
There's more: mixins that act kind of like functions, and the ability to inherit one selector from another. It's very clever and very useful.
If you're coding in Ruby on Rails, it'll even automatically compile it to CSS for you, but there's also a general purpose compiler that can do it for you on-demand.
You're not the first to wonder and the answer is no. Elliotte has a nice rant on it: http://cafe.elharo.com/web/css-repeats-itself/. You could use JSP, or its equivalent, to generate the CSS at runtime.
CSS doesn't offer any such thing. The only solution is to write a preprocessing script that is either run manually to produce static CSS output based on some dynamic pseudo-CSS, or that is hooked up to the web server and preprocesses the CSS prior to sending it to the client.
That's not supported at the moment unless you use some script to produce the CSS based on some variables defined by you.
It seems, though, that at least some people from the browser world are working on it. So, if it really becomes a standard sometime in the future, then we'll have to wait until it is implemented in all the browsers (it will be unusable until then).
Since CSS does not have that (yet, I believe the next version will), follow Konrad Rudolphs advice for preprocesing. You probably want to use one that allready exists: m4
http://www.gnu.org/software/m4/m4.html
You're making it too complicated. This is the reason the cascade exists. Simply provide your element selectors and class your color:
h1 {
color: #000;
}
.a-theme-color {
color: #333;
}
Then apply it to the elements in the HTML, overriding when you need to use your theme colors.
<h1>This is my heading.</h1>
<h1 class="a-theme-color">This is my theme heading.</h1>
I've written a macro (in Visual Studio) that allows me to not only code CSS for named colors but to easily calculate shades or blends of those colors. It also handles fonts. It fires on save and outputs a separate version of the CSS file. This is in line with Bert Bos's argument that any symbol processing in CSS take place at the point of authoring, not not at the point of interpretation.
The full setup along with all the code would be a bit too complicated to post here, but might be appropriate for a blog post down the road. Here's the comment section from the macro which should be enough to get started.
The goals of this approach are as follows:
Allow base colors, fonts, etc. to be defined in a central location, so that an entire pallete or typographical treatment can be easily tweaked without having to use search/replace
Avoid having to map the .CSS extension in IIS
Generate garden-variety text CSS files that can be used, for example, by VisualStudio's design mode
Generate these files once at authoring time, rather than recalculating them every time the CSS file is requested
Generate these files instantly and transparently, without adding extra steps to the tweak-save-test workflow
With this approach, colors, shades of colors, and font families are all represented with shorthand tokens that refer to a list of values in an XML file.
The XML file containing the color and font definitions must be called Constants.xml and must reside in the same folder as the CSS files.
The ProcessCSS method is fired by EnvironmentEvents whenever VisualStudio saves a CSS file. The CSS file is expanded, and the expanded, static version of the file is saved in the /css/static/ folder. (All HTML pages should reference the /css/static/ versions of the CSS files).
The Constants.xml file might look something like this:
<?xml version="1.0" encoding="utf-8" ?>
<cssconstants>
<colors>
<color name="Red" value="BE1E2D" />
<color name="Orange" value="E36F1E" />
...
</colors>
<fonts>
<font name="Text" value="'Segoe UI',Verdana,Arial,Helvetica,Geneva,sans-serif" />
<font name="Serif" value="Georgia,'Times New Roman',Times,serif" />
...
</fonts>
</cssconstants>
In the CSS file, you can then have definitions like:
font-family:[[f:Text]];
background:[[c:Background]];
border-top:1px solid [[c:Red+.5]]; /* 50% white tint of red */
See also Avoiding repeated constants in CSS. As Farinha said, a CSS Variables proposal has been made, but for the time being, you want to use a preprocessor.
You can use mutliple classes in the HTML element's class attribute, each providing part of the styling. So you could define your CSS as:
.ourColor { color: blue; }
.ourBorder { border: 1px solid blue; }
.bigText { font-size: 1.5em; }
and then combine the classes as required:
<h1 class="ourColor">Blue Header</h1>
<div class="ourColor bigText">Some big blue text.</div>
<div class="ourColor ourBorder">Some blue text with blue border.</div>
That allows you to reuse the ourColor class without having to define the colour mulitple times in your CSS. If you change the theme, simply change the rule for ourColour.
This may sound like insanity, but if you are using NAnt (or Ant or some other automated build system), you can use NAnt properties as CSS variables in a hacky way. Start with a CSS template file (maybe styles.css.template or something) containing something like this:
a {
color: ${colors.blue};
}
a:hover {
color: ${colors.blue.light};
}
p {
padding: ${padding.normal};
}
And then add a step to your build that assigns all the property values (I use external buildfiles and <include> them) and uses the <expandproperties> filter to generate the actual CSS:
<property name="colors.blue" value="#0066FF" />
<property name="colors.blue.light" value="#0099FF" />
<property name="padding.normal" value="0.5em" />
<copy file="styles.css.template" tofile="styles.css" overwrite="true">
<filterchain>
<expandproperties/>
</filterchain>
</copy>
The downside, of course, is that you have to run the css generation target before you can check what it looks like in the browser. And it probably would restrict you to generating all your css by hand.
However, you can write NAnt functions to do all sorts of cool things beyond just property expansion (like generating gradient image files dynamically), so for me it's been worth the headaches.
CSS does not (yet) employ variables, which is understandable for its age and it being a declarative language.
Here are two major approaches to achieve more dynamic style handling:
Server-side variables in inline css
Example (using PHP):
<style> .myclass{color:<?php echo $color; ?>;} </style>
DOM manipulation with javascript to change css client-side
Examples (using jQuery library):
$('.myclass').css('color', 'blue');
OR
//The jsvarColor could be set with the original page response javascript
// in the DOM or retrieved on demand (AJAX) based on user action.
$('.myclass').css('color', jsvarColor);