This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Create a variable in .CSS file for use within that .CSS file
I heard about that we can declare/define variable in CSS and use them like global variables like this:
#nice-blue: #5B83AD;
#header { color: #nice-blue; }
So anyone knows how to use them?
For that you need to use Less or Sass which are CSS Dynamic languages.
here's some comparison between both technologies.
You need to use something like SASS
http://sass-lang.com/#variables
or Less
http://lesscss.org/
There is a language written on top of CSS which make use of variables like you asked, it's called LessCSS
Related
This question already has an answer here:
Is it possible to use CSS vars in CSS3 selectors?
(1 answer)
Closed 7 years ago.
Keep in mind that this is not a duplicated question, to probe it go and read the http://www.w3.org/TR/css-variables/ if you read it says:
This version: http://www.w3.org/TR/2015/CR-css-variables-1-20151203/ If you read the date it says that is from 2015/12/03 so it's very recent, probably there is the confussion. The question that it says that was asked first does not work in the same way and was asked two years ago, e.g.(it uses a prefix -webkit- so it means that it wont work in all browsers that support the Native CSS Variables) The kind of variables i'm talking is something new, to understand why am i saying this, you need to read the articles of the links below, also my question cover another things that aren't answered in the question that was asked two years ago.
Also the second question below is updated now.
Maybe some people already know that there is a new implementation of variables for CSS, they bring a whole new way to write CSS code, at this moment the browser support is very low, but this have a great future.
I had read some information that explains more about CSS variables, so if you need info about it:
http://philipwalton.com/articles/why-im-excited-about-native-css-variables/
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
http://www.w3.org/TR/css-variables/
There are a few things that i still don't have clear:
Is there another method to change the values of a variable, that not be the media queries? e.g. using :hover or javascript?
Can i use variables to define Selectors?
Is there another method to change the values of a variable, that not
be the media queries and selectors?
I assume you mean changing the value of a CSS variable outside of a rule set.
Yes, you can. You can assign a CSS variable through the style property and the setProperty or setPropertyValue methods.
document.body.style.setProperty('--bg', 'red');
body {
background: var(--bg);
}
Can i use variables to define Selectors?
No. It wouldn't make sense to do so: from which element should it retrieve the value of the variable? Using variable values in properties could make more sense, but you can't neither.
To retrieve the value of a CSS variable you can only use var(), which can only be used in values.
The value of a custom property can be substituted into the value of another property with the var() function.
This question already has answers here:
Is it possible to reference one CSS rule within another?
(6 answers)
Closed 8 years ago.
What I'm trying to do is refer a css class in another css class:
.customClass1{
//some styles
}
.customClass2{
//some styles
}
.customClass3{
use customClass1;
use customClass2;
}
Is this even possible?
You should use a CSS pre-processor like LESS, then you can use Mixins LESS Mixins
This question already has answers here:
Using mixins in bootstrap 3 to avoid unsemantic markup for layout structure
(3 answers)
Closed 8 years ago.
If we use bootstrap without a preprocessor we add classes into our opening tags like this:
<div id="El" class="col-md-1"></div>
I'm used to using bourbon neat with sass, in which case I can import mixins within the rules for my elements in sass. In which case I can do things like this:
#myEl
#import span-column(6)
Looking at the less documentation for bootstrap here: http://bootstrapdocs.com/v3.1.1/docs/css/#less it appears that there are no mixins available for bootstraps grid system. They've got convenience mixins for vendor prefixes, transitions, gradients and other things, but nothing for their own grid system.
So I've got a couple of questions:
How do I use less to define my grid using bootstrap?
And, if I want to do actually do this, am I working against the tool itself? I'm thinking that if using the less version of bootstrap this way isn't documented, then maybe there's good reason for it. Perhaps the less version of bootstrap just isn't supposed to be used this way and I should be using another set of tools instead?
You could do this, but you have to write just less. A good introduction to less is at their website: www.lesscss.org.
In your case you need:
#import 'bootstrap/bootstrap.less';
#import 'bootstrap/theme.less';
#El {
.col-md-1;
}
Then you compile this file with lessc. After that, your #El-element will behave like a .col-md-1.
Intentionally, Bootstrap is meant to use with their css class and using their less-files is not the first way of bootstrap. But if you know bootstrap and less well, you shouldn't have problems. If you start fresh with bootstrap, I recommend that you use just their css.
This question already has an answer here:
Using HTML attributes as CSS property values [duplicate]
(1 answer)
Closed 9 years ago.
I would like to do this in HTML:
text
and in CSS:
a {
background-image: url(attr(href));
}
It doesn't seem to work for me. Is it even possible?
Not possible in static CSS file. However you can have dynamically generated CSS by any server side language such as PHP.
Or use Sass or LESS if you need variables in CSS.
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
GWT theme style overrides my css style
What should I do to prevent GWT from using its theme and totally use the CSS that I specify?
Well, you can be radical and just remove the CSS files that are in the com.google.gwt,user.theme.chrome/dark/standard packages (don't forget to remove then from the gwt.xml file). Then specify your own CSS....disadvantage is that you have to style absolutely everything yourself. Hope this helps.