This question already has an answer here:
What do these double-dash-prefixed CSS properties do? [duplicate]
(1 answer)
Closed 5 months ago.
I have seen a site styling
html
{
--r-globalnav-height: 44px;
}
what does this mean?
It is CSS variable. It can contain specific values to be used multiple times in a style sheets.
You can then use the variable from your example as follows:
nav {
height: var(--r-globalnav-height); /* height: 44px */
}
You can read more at Using CSS custom properties (variables) - MDN
Related
This question already has answers here:
Why does the Cascade for CSS Custom Properties Not Work? [duplicate]
(1 answer)
CSS scoped custom property ignored when used to calculate variable in outer scope
(2 answers)
Closed 4 years ago.
I've been working with some code that uses css variables where one of the variables derives it's value from a calc formula containing another variable (like the code below)
:root {
--parent-size: 20rem;
--child-size: calc(var(--parent-size) / 2);
}
...
#media (min-width: 768px) {
--parent-size: 30rem;
}
When var(--parent-size) change; var(--child-size) remains the same.
I'm assuming this might be a bug as it only affect variables with calculated values.
I've added a jsfiddle for reference here
This question already has answers here:
Override and reset CSS style: auto or none don't work
(8 answers)
Closed 7 years ago.
I'm inheriting styles from Bootstrap and some other sources and I need to undefine one of their attributes. Is there a simple way to undefine some CSS attribute that's been imported such as:
.container, main { width: 1170; }
The question is specifically if you can "UNDEFINE" an attribute. Not overwrite it.
Maybe
.container, main { width: 0px !important; }
Or am I misunderstanding the question?
This question already has answers here:
Purpose of asterisk before a CSS property
(6 answers)
Closed 9 years ago.
The question is all in the title, but if I have a rule that says
#someID{
margin-left: 10px;
*margin-left: 10px;
}
what does the *margin-left statement do?
* is useful for use as a CSS hack and Its intent is to target specific versions of IE.
The *<property> is used to target IE7 (and below).
This aticle might help you for details
This question already has answers here:
Append the parent selector to the end with Sass
(1 answer)
Using SASS & reference for OOCSS
(1 answer)
Closed 8 years ago.
I have a class named button_class. Now a button or an input tag could have this class. Now using sass, I need to add something to the css if the tag name is input. Like this:
.button_class {
display: inline-block;
/* something like this */
& input {
padding: 2px;
}
}
As you guessed, I don't know how to do that.
SASS syntax doesn't permit this yet. :(
&input gives
"input" may only be used at the beginning of a compound selector
This question already has answers here:
Purpose of asterisk before a CSS property
(6 answers)
Closed 9 years ago.
I've been using Twitter's Bootstrap package to build a site, and was browsing through the CSS when I came across the following (more or less, cruft redacted for clarity):
.btn-primary {
background-color: #006dcc;
*background-color: #0044cc;
}
Now, I've seen * used as part of the selector, both as part of a constructor like li li * { ... } and as part of an attribute selector a [name*=foo] (and obviously as part of CSS comments /* */), but I've never seen this before. Can anybody share any insight as to what it's being used for? I've also seen it in the following (complete) context:
button.btn,
input[type="submit"].btn {
*padding-top: 3px;
*padding-bottom: 3px;
}
where the * is in front of two related but distinct properties. What's going on?
This article should answer your question. It's basically a way 'hacking' CSS selectors to target a certain browser.