MargateSteve Posted April 8, 2015 Share Posted April 8, 2015 I am trying to get to grips with some of the more advanced .less functions but have hit a bit of a stumbling point. I have read about using 'when' and am trying to change the text color based on the darkness level of the @brand color. What I have is very similar to an example I saw but that one was setting the background too, so that part has been removed. @brand-beige: #F5F5DC; @brand-gray: #808080; .textcolor(@txtcolor) when (lightness(@txtcolor) >= 50%) { color: #fff; } .textcolor(@txtcolor) when (lightness(@txtcolor) < 50%) { color: #000; } /** beige**/ @state-beige-text: textcolor(@brand-beige); @state-beige-bg: @brand-beige; @state-beige-border: darken(spin(@brand-beige, 10%), 50%); /** gray**/ @state-gray-text: textcolor(@brand-gray); @state-gray-bg: @brand-gray; @state-gray-border: darken(spin(@brand-gray, 10%), 50%); When I try to compile it I get the following error SyntaxError: error evaluating function `darken`: Object #<Object> has no method 'toHSL' in W:\wamp\www\Bootstrap\less\test.less on line 12, column 2: 11 .alert-aliceblue { 12 .alert-variant(@alert-beige-bg; @alert-beige-border; @alert-beige-text); 13 } if I change each of the '@state-xxx-text' variables to anything else, like the bootstrap defaults below, everything works fine. /** beige**/ @state-beige-text: darken(@brand-beige, 5%); @state-beige-bg: @brand-beige; @state-beige-border: darken(spin(@brand-beige, 10%), 50%); /** gray**/ @state-gray-text: darken(@brand-gray, 5%); @state-gray-bg: @brand-gray; @state-gray-border: darken(spin(@brand-gray, 10%), 50%); I am sure I am doing something obviously wrong as I am just getting to grips with it. I thought it might be the syntax but have tried @state-aliceblue-text: .textcolor(@brand-aliceblue); @state-aliceblue-text: {textcolor(@brand-aliceblue)}; @state-aliceblue-text: {.textcolor(@brand-aliceblue)}; and all give the same result. If anyone could ive any potential pointers, I would be grateful. Regards Steve Link to comment https://forums.phpfreaks.com/topic/295358-dynamic-colors-using-less/ Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.