I am trying to reuse a background-color definition of the parent rule set in background-color definition of a child rule set. However, Less evaluates the lookup as a recursion.
I would like this:
.button {
background-color: whitesmoke;
&:hover {
background-color: darken($background-color, 10%);
}
}
to work the same way as this:
#the-color: whitesmoke;
.button {
background-color: #the-color;
&:hover {
background-color: darken(#the-color, 10%);
}
}
but without the need for an extra variable.
The documentation isn't very specific on this. Am I missing something or is this just not possible?
I am aware of other solutions to changing the tint of a button on hover (e.g. using the filter property).
EDIT 1:
The closest I can get to is this. I just need it to be background-color instead of color.
.button {
background-color: whitesmoke;
&:hover {
color: darken($background-color, 10%);
}
}
The problem is the lookup of $background-color evaluates to the background-color of the same row (which, I think, doesn't ever make sense) and refuses to compile instead of evaluating to a rule in the parent rule set or just simply evaluating to one of the previous rows.
Related
If I have a blue div that someone else owns the code for
.stuff {
background-color: blue;
}
And I want it to be red on hover
.stuff:hover {
background-color: red;
}
But then I want to be able to add a class for it to go back to its non-pseudo-class state:
.stuff.otherclass:hover {
background-color: unset; /* Want blue in this case */
}
Is there a CSS option of going back to a pre-pseudo-class state?
Codepen demo:
http://codepen.io/anon/pen/EyEWww
The only way to roll back the cascade is using the revert keyword, but it rolls back to another origin.
There is no way to make the 2nd value in the output of the cascade become the cascaded value, ignoring the winner.
Instead, you can modify your selector and use the :not() pseudo class:
.stuff {
background-color: blue;
}
.stuff:not(.otherclass):hover {
background-color: red;
}
Or, alternatively, take advantage of .stuff.otherclass:hover having more specificity than .stuff:hover
.stuff, .stuff.otherclass:hover {
background-color: blue;
}
.stuff:hover {
background-color: red;
}
If I would like to format an element that has a given class, sometimes (very rare) I use:
.beigeButton[class~="enabledButton"] {
}
What if I want to give properties to an element only when it does NOT contain the given string?
This does not work:
.beigeButton[class!="enabledButton"] {
}
How can I do that?
Use :not:
.beigeButton:not(.enabledButton)
In general you would style the basic button and overwrite the style with additional classes, somehow like this:
.beigeButton {
background-color: beige;
cursor: pointer;
}
.beigeButton.disabled {
background-color: grey;
cursor: not-allowed;
}
.beigeButton.enabled {
background-color: green; //or just keep the basic color
}
you could also define a more general 'disabled class' which can be applied to any other Element this way:
.disabled {
background-color: red;
pointer: not-allowed;
}
A button with the class 'disabled' will get a grey background, though the rule .beigeButton.disabled is more specific as the general .disabled rule.
Any other element (or if the more specific rule doesn't exist or apply) will get a red background-color.
edit:
To answer your initial question, you can style the other way round too, like marcinjuraszek already described:
.beigeButton:not(.enabled) {
background-color: grey;
cursor: not-allowed;
}
Note: check browser compatibilty here
Hope this helps :)
This question already has answers here:
Sass - Manipulate inherited property?
(4 answers)
Closed 9 years ago.
I am trying to create a top level <a> styling for the for my application using sass. Most of the links across the site are green so I have this as a style. (I'm using compass for the darken function)
a {
color: green;
&:hover {
color: darken(green, 10%);
}
}
However, in certain cases the links aren't green. In these cases I'll have to specify both the text color and the hover color, otherwise it will default to hovering to green. I am wondering if there is a way to do this DRYer. Ideally I would be able to get the parent classes color, like so.
a {
color: green;
&:hover {
color: darken(parent(color), 10%);
}
}
That way the hover will always default to whatever the color of the specific is. Does this make sense? Is something like this possible? If not, what's the best way to handle this? A Mixin?
Thanks!
What you ask is not possible with SASS. SASS does not build an object model with all elements and properties (it is impossible without HTML).
A mixin is an appropriate solution for a reusable case, but for an ad-hoc case it is an overkill.
Just use a variable:
a {
$link-color: green;
color: $link-color;
&:hover {
color: darken($link-color, 10%);
}
}
Note that you can move the variable into a separate partial where you store all your variables.
I'd use a mixin:
#mixin link($color) {
a { color: $color};
&:hover { color: darken($color, 10%) };
}
.foo {
#include link(green);
}
Rendered CSS:
.foo a { color: green; }
.foo a:hover { color: #004d00; }
I should have asked this in my previous question (CSS style declaration reusage), but I didn't think of it at the time. Since that question is answered, I'll start a new one.
I am trying to create color palette in CSS that will be used through out my application.
For example:
.blue { color: #434544; }
.green { color: #G99933; }
I do not want to define colors anywhere else in my CSS. The problem I am running into is how do i use the .blue style when, for example, I need a background-color definition? Take a look at this:
.editor { background-color: #434544 }
I want to reference back to the .blue style instead of defining it here again. How can I do that?
UPDATE
I found the perfect solution for my question:
Chirpy -> http://chirpy.codeplex.com/
There's no way to do this in native CSS. You should look into pre-processing your CSS, since all those pre-processors have support for variables.
Here's what it looks like using (scss-flavored) SASS:
$blue: #434544;
$green: #G99933;
.blue { color: $blue; }
.green { color: $green; }
.editor { background-color: $blue }
I would like to have a property reference its "self", I am not sure how to do this in LESS. Heck I am having a hard time crafting the wording of the question. Basically I would like to accomplish the following:
a:visited {
color: lighten(color, 10%);
}
Where a's color could vary based on its container div.
So I might have the following selectors:
div#blue-text a {
color: #00F;
}
div#black-text a {
color: #000;
}
Once I visit the links, I should have a lighter blue and gray link texts respectively.
Note: this is a very simple scenario, but I have much more complicated needs, and if there is a clean way to do this, then I would be a happy camper.
Basically, since you're going to set the parent's color in LESS as well, you would store the color in a variable and reference it.
Here is an example:
#column1Color: #aaaaaa;
#column2Color: #bbbbbb;
#column3Color: #cccccc;
.columns {
// set the color of the first column
.column:nth-child(1) {
background-color: #column1Color;
a {
color: lighten(#column1Color, 10%);
}
}
// set the color of the second column
.column:nth-child(2) {
background-color: #column2Color;
a {
color: lighten(#column2Color, 10%);
}
}
// set the color of the third column
.column:nth-child(3) {
background-color: #column3Color;
a {
color: lighten(#column3Color, 10%);
}
}
}
LESS would not know what the color of the hyperlink is unless you "told" it. Same goes for the browser, it would not know the color unless it executes all the linked CSS files.
So, what you need (if I understood you correctly) can not be achieved the way you're thinking about it.