Is it possible in Less to create a mixin that can target the backgroubd opacity of an element that already has its background colour set by an existing rule?
E.g
div {
background-colour: red;
}
.opacity {
background-color: fade(#existing-bg, 50%)
}
If I understand you correctly, then not in the sense that you are trying to do - #existing-bg would need to be able to assess the current BG colour at RUNTIME but essentially, we use LESS at compile time. The answer would be to put the colour (red) in a variable and supply the same variable in both places.
#existing: #ff0000;
div {
background-colour: #existing;
}
.opacity {
background-color: fade(#existing, 50%)
}
Related
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.
Hi I have this current CSS for fullCalendar (v 1.6.4):
.full-calendar .fc-content .fc-event-container .fc-event {
background: #ef6262!important;
border-color: #eb3d3d!important;
color: #fff!important;
border-radius: 0;
}
When I add a new Class to an event (based on some programming calculations) I do this:
event.className = 'paused-event';
calendar.fullCalendar('updateEvent', event);
My paused-event CSS is this:
.paused-event,
.paused-event div,
.paused-event span {
background: #71CCBF;
border-color: #65B7AB;
}
The background color changes correctly, the border stays the same as the default CSS.
Expectancy:
The event color AND border should change when the paused-event class is present.
The !importants are overriding the latest class properties. You could try to add !important to .paused-event properties as well, but the best would be to avoid any !importants and simply override by impacting with a deeper selector (although it's weird the background does change considering the important):
.class1 vs div.class1.class2 (deeper one)
Anyways, if you simply need to solve that and fast you can try:
.paused-event,
.paused-event div,
.paused-event span {
background: #71CCBF;
border-color: #65B7AB !important;
}
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 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.
I'm using a custom radio button spritesheet for an application that I'm writing for my work. I've split up this spritesheet logically into columns and rows - the columns and rows correspond with specific states that the radio button can have. (The columns are states, such as disabled, and application states, such as "correct" or "incorrect", while the rows are for selected states and hover/focus states.
My implementation uses dynamically-added semantic classes to influence the background position. As such, if a radiobutton is marked "correct" and it has focus, a "correct" CSS class will be applied and a "focus" class will be applied, calling the background position for the column and row respectively.
For these classes, I'm currently using the background-position-x and background-position-y CSS attributes, which work in IE and chrome, but not in Firefox and Opera. (These two properties aren't officially part of any CSS spec.) Since we're using the LESS preprocessor, I want to know if there's a way to create a LESS mixin that will dynamically "inherit" an x or y value for the "background-position" property.
In psuedocode, something like this:
.my-background-mixin-x(#value) {
background-position: #value + 'px', inherit; (inherit y-value)
}
.my-background-mixin-y(#value) {
background-position: inherit, #value + 'px'; (inherit x-value)
}
(That's not really accurate syntax, but I hope it conveys the idea.)
Is this possible in LESS? Can less store variables and target properties like this?
Thanks!
You cannot have LESS inherit values that way, and background-position itself can only inherit both values in the CSS cascade. I think a possible "easy" solution would be the following code. Note: Since I do not know your sprite positioning, for the sake of illustration here, I have assumed the following:
Your columns are 10px wide and are in the order of a) a "base" image, b) your disabled image, c) your .correct image, and d) your .incorrect image.
Your rows are 10px tall and are in the order of a) a "base" image, and b) your hover and .focus image (which are the same in my example; not sure about your real situation).
That your "base" and disabled settings do not require a :hover or .focus value.
Given those assumptions, then using a mixin with a horizontal (X) and vertical (Y) shift amount, with a passed in multiplier for the column and row position in the sprite, can give us this code (which you should be able to modify in such places where my assumptions were wrong):
LESS Code
input[type=radio] {
// bkg position set mixin
.setBkgPos(#X: 0, #Y: 0) {
#Xshift: -10px;
#Yshift: -10px;
background-position: (#Xshift * #X) (#Yshift * #Y);
}
.setBkgPos;
&[disabled="disabled"] {
.setBkgPos(1, 0);
}
&.correct {
.setBkgPos(2, 0);
&:hover, &.focus {
.setBkgPos(2, 1);
}
}
&.incorrect {
.setBkgPos(3, 0);
&:hover, &.focus {
.setBkgPos(3, 1);
}
}
}
CSS Example Output
input[type=radio] {
background-position: 0px 0px;
}
input[type=radio][disabled="disabled"] {
background-position: -10px 0px;
}
input[type=radio].correct {
background-position: -20px 0px;
}
input[type=radio].correct:hover,
input[type=radio].correct.focus {
background-position: -20px -10px;
}
input[type=radio].incorrect {
background-position: -30px 0px;
}
input[type=radio].incorrect:hover,
input[type=radio].incorrect.focus {
background-position: -30px -10px;
}