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 Quote Link to comment https://forums.phpfreaks.com/topic/295358-dynamic-colors-using-less/ Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.