Can I use LESS mixins with when statement plus pseudo element?
I want to create a Mixins. The logical is if the primary color is white, then I need to give .userBadge:after secondary-color.
Here is my LESS mixins, but it seems like does not work.
.property-style(#primary-bgcolor, #primary-color, #secondary-bgcolor, #secondary-color) {
.wrapper {
background-color: #primary-bgcolor;
}
.userBadge:after(#primary-color, #secondary-color) when (#primary-color = "#fff") {
background: #secondary-color;
}
}
Can you please help? Thank you so much.
You have a few errors:
You're missing the # in front of secondary-color
Mixins are class-like .x, not arbitrary selectors. x::after(...) is invalid - you'd need x(...) {&::after {...} }
Your .property-style mixin defines a mixin, but you never called that mixin
Your .userBadge mixin defines a mixin, but you never called that mixin
In this case "#fff" needs to be #fff without quotes - otherwise your color would have to be "#fff" instead of #fff! :D
Here's a working version of what you have (I'm leaving out #secondary-bgcolor since you didn't use it for anything) [working demo]
.property-style(#primary-bgcolor, #primary-color, #secondary-color) {
// `.wrapper` styles
.wrapper {
background-color: #primary-bgcolor;
}
// define the other mixin. note that we _could_ use the same variable names
// but they are _new_ variables - I've given them new names to
// help us remember that they won't automatically inherit the values of the parent mixin
.myOtherMixin(#primary, #secondary) when (#primary = #fff) {
background: #secondary
}
.userBadge::after {
.myOtherMixin(#primary-color, #secondary-color)
}
}
.property-style(#ccc,#fff,#eee); // result:
// .wrapper {background: #ccc;}
// .userBadge::after {background-color: #eee;}
However, nesting mixins can get pretty messy. This would be a little cleaner [working demo]
.variableColor(#color, #otherColor) when (#color = #fff) {
background: #otherColor
}
.property-style(#primary-bgcolor, #primary-color, #secondary-color) {
.wrapper {
background-color: #primary-bgcolor
}
.userBadge::after {
.variableColor(#primary-color, #secondary-color)
}
}
.property-style(#ccc,#fff,#eee); // result:
// .wrapper {background: #ccc;}
// .userBadge::after {background-color: #eee;}
Or if that variable color mixin doesn't actually need to be reusable [working demo]
.property-style(#primary-bgcolor, #primary-color, #secondary-color) {
.wrapper {
background-color: #primary-bgcolor;
}
}
.property-style(#primary-bgcolor, #primary-color, #secondary-color) when (#primary-color = #fff) {
.userBadge::after {
background: #secondary-color
}
}
.property-style(#ccc,#fff,#eee); // result:
// .wrapper {background: #ccc;}
// .userBadge::after {background-color: #eee;}
But wait let's back up. The fact that you didn't call your mixin, at least in the code you've provided, makes me wonder if the whole thing really needs to be in one. If you don't really need to be able to do something like
.property-style(#ccc, #ddd, #eee);
alternate {.property-style(#aaa, #fff, #bbb)}
this much simpler solution (which relies on default values) would do the trick [working demo]
#primary-bgcolor: #ccc;
#primary-color: #fff;
#secondary-color: #eee;
.badgeBg(#check: #primary-color, #ifPasses: #secondary-color) when (#primary-color = #fff) {
background: #secondary-color
}
.wrapper {
background-color: #primary-bgcolor
}
.userBadge::after {
.badgeBg
}
/*
result:
.wrapper {background: #ccc;}
.userBadge::after {background-color: #eee;}
*/
Bonus: just for kicks, here's a different approach you could take. It's definitely overkill for what you've shown here, but you might find it an interesting thing to study. It uses default values and property interpolation, and it makes the color in the "if" a dynamic part of the theme. [working demo]
.propertyValueCondition(#property, #value, #check: pass, #guard: pass) when (#check = #guard) {
#{property}: #value
}
.theme(#color1, #color2, #color3, #color4:#fff) {
.wrapper {
.propertyValueCondition(background-color, #color1)
}
.userBadge::after {
.propertyValueCondition(background, #color3, #color2, #color4)
}
}
.theme(#ccc, #ddd, #eee);
alternate {
.theme(#bbb, #aaa, #eee, #aaa)
}
/*
result:
.wrapper {background-color: #ccc;}
alternate .wrapper {background-color: #bbb;}
alternate .userBadge::after {background: #eee;}
*/
.a, .b
{
color: red;
$x: &;
#if $x == '.b'
{
color: $x;
}
}
http://sassmeister.com/gist/ad7fa7f3a431f3e2d4e0
Not work, why? Could you help me someone with some fix?
Because $x is equal to the full selector (.a, .b), never to .a or .b.
What you're trying to achieve would be:
.a, .b {
color: red;
&.b {
color: blue;
}
}
But it will generate this code (working, but not optimized):
.a, .b {
color: red;
}
.a.b, .b.b {
color: blue;
}
I would like to add a conditional hover state to my LESS mixin.
I've tried the following but it returns an error:
.foo(#hoverstate:false){
color:red;
&:hover when (#hoverstate = true){
color:blue;
}
}
What is the correct syntax for this?
dotless does not support "CSS guard" construction so you'll need a mixin to put the guard there, e.g.:
.foo(#hoverstate: false) {
color: red;
.-(); .-() when (#hoverstate = true) {
&:hover {
color: blue;
}
}
}
that can be simplified to:
.foo(...) {
color: red;
}
.foo(true) {
&:hover {
color: blue;
}
}
(Note I did not test this code with dotless so it's possible you would need to correct other minor incompatibilities)
Is it possible to change specific point color with dx chartjs?
I know how to change point colors for the whole series, but I can't find anything on changing specific points.
You can use
customizePoint
callback.
$("#container").dxChart({
dataSource: dataSource,
...
customizePoint: function() {
if(this.value > highAverage) {
return { color: '#ff4500', hoverStyle: { color: '#ff4500' } };
} else if(this.value < lowAverage) {
return { color: '#00ced1', hoverStyle: { color: '#00ced1' } };
}
},
....
}
});
You can find find documentation and demo
How do you transition using CSS the properties of elements with display none?
My current solution is to set display to block with JavaScript, wait 10 milliseconds for repaint, then apply the class that changes the properties I want to animate.
Note: I'm using jQuery for code brevity.
CSS - animating opacity as an example. Don't care about $.show().
.element
{
display:none;
opacity:0;
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
-ms-transition:all 0.5s;
-o-transition:all 0.5s;
transition:all 0.5s;
}
.element.shown
{
opacity:1;
}
JavaScript
function show()
{
var $element=$('.element');
$element.css({display:'block'});
//Add class a few moments later than chaning display to block, otherwise animations CSS Transitions won't fire
setTimeout(function(){
$element.addClass('shown');
},10);
}
function hide()
{
var $element=$('.element');
$element.removeClass('shown');
//Remove element from display after transition ends
$element.on('webkitTransitionEnd otransitionend oTransitionEnd MSTransitionEnd transitionend',function()
{
$element.css({display:'none'});
});
}
I feel there should be a better way though, a CSS-only way. Is there?
I just found workaround. All you need is use animation and start it little bit after you apply display:block. Like this:
#keyframes submenu_animation {
from {
opacity: 0;
}
1% {
opacity: 0;
}
99% {
opacity: 1;
}
to {
opacity: 1;
}
}
li ul {
opacity: 0;
display: none;
animation-name: submenu_animation;
animation-duration: 300ms;
animation-direction: reverse;
li ul.open {
display: block;
}
li:hover ul {
animation-direction: normal;
opacity: 1;
}
Javascript is pretty the same, It will apply class "open" once you hover on required element. When you hover-out it will remove "open" class little bit later, when animation is finished.