I wrote a class in LESS, which looks like this:
.horizontal-gradient (#startColor: #eee, #endColor: white) {
background: linear-gradient(red, yellow);
}
I tried to call it inside a LESS variable with this:
#primary-color: .horizontal-gradient(#35a1e5, #0172b9);
However, when running I get the error
NameError: variable #primary-color is undefined
But when I initialize the #primary-color as this:
#primary-color: #000;
Then it works just fine. So somehow, .horizontal-gradient class is causing the error.
DEMO I coudn't get LESS working within the SO fiddle. So I created a fiddle on jsFiddle.
http://jsfiddle.net/T2Xe9/828/
How can I use a LESS class inside a variable?
What you are using is not a variable, but a mixin: http://lesscss.org/features/#mixins-feature.
Without changing your .horizontal-gradient mixin, you can just use it:
div#background {
.horizontal-gradient(#35a1e5, #0172b9);
// The rest of your style
}
So: you cannot register a mixin result into a variable.
Related
In my angular 11 app I am trying to globally use css variables to declare global colors.
In my styles.scss I have:
:root{
--primary : #0b68e8;
--secondary:#ABCFFF;
}
.test-class{
background: var(--primary);
}
When I am applying that class in one of mine components I can see that var was not properly taken from declared variables:
I tried to find any solution , but cant resolve it. Do you maybe know what is wrong here?
try
.test-class{
background: #{var(--primary)};
}
BTW, if you're using sccs, why not use sass variables?
$primary: #0b68e8;
.test-class{
background: $primary;
}
In my project I have a CSS custom variables like this:
:root {
--primary-color: #e04c4c;
--secondary-color: #2c2c5e;
--text-color: #d67900;
}
In my LESS files I have used LESS color functions to get more colors base on its primary and secondary. This is how its look like:
.component1 {
background: darken(--primary-color, 10%);
}
.component2 {
background: lighten(--secondary-color, 5%);
}
But when I compile this, it gives an error like this?
// Undefined_methodError: error evaluating function darken: //
Object # has no method 'toHSL'
When googling I found a solution for SASS, but not for LESS.
Can anybody tell me is there any possible workaround for this particular case?
Thank you.
I'm passing a list into a mixin to reduce the number of parameters I have to pass into my mixin. The mixin code can be seen below.
#mixin colorMedal($medalData) {
background-image: linear-gradient(
45deg,
nth($medalData,2) 0%,
nth($medalData,2) 50%,
nth($medalData,1) 50.1%,
nth($medalData,1) 100%
);
#{nth($medalData,0)} ~ .medal__ribbon--left {
background: nth($medalData,3);
}
#{nth($medalData,0)} ~ .medal__ribbon--right {
background: nth($medalData,4);
}
}
The list that im passing looks something like this
$platinum: ".medal__platinum", $medal-platinum, $medal-platinum-dark,
$medal-platinum-ribbon, $medal-platinum-ribbon-dark;
And the call of the mixin is :
#include colorMedal($platinum);
The code that seems to be causing a compile error is
#{nth($medalData,0)}
There must be a way to do this since you can pass in multiple values on their own. Is there a way to use a value from a list as a selector?
sass list starts at index 1 not 0
so change this from
#{nth($medalData,0)}
to
#{nth($medalData,1)}
you can debug the changes in codepen
https://codepen.io/srajagop/pen/wvBrzjO?editors=0102
I need to be able to use CSS variables because I need to have an hover effect (background-color) to be customizable by my VueJs app.
But my CSS stylesheet should have a default value, which is stored in a nested SCSS map. (map-getter is a function which returns values from nested maps)
I know that my SCSS code works, because I get the intended result when I do this:
.theme--dark .AppNavTile:hover {
background-color: map-getter($theme-dark, AppNav, hover);
//returns background-color: rgba(255, 255, 255, 0.87); in my browser's console
}
In order to use CSS variables, I can modify the code as follows:
.theme--dark .AppNavTile:hover {
--hover-bg-color: red;
background-color: var(--hover-bg-color);
}
It works fine and I have a red background when hovering the element.
Then I try to combine both:
.theme--dark .AppNavTile:hover {
--hover-bg-color: map-getter($theme-dark, AppNav, hover);
background-color: var(--hover-bg-color);
}
According to by browser's console, this returns the following:
.theme--dark .AppNavTile:hover {
--hover-bg-color: map-getter($theme-dark, AppNav, hover);
background-color: var(--hover-bg-color);
}
So it seems that the SCSS code remains uncompiled in the CSS variable. Is there any way around it?
Thanks!
The "problem" with CSS variables is they can have any value – why map-getter($theme-dark, AppNav, hover) is rendered as is. To instruct SCSS that this is actual SCSS code and not a random string you need to use interpolation (like if you use SCSS variables inside calc):
--hover-bg-color: #{map-getter($theme-dark, AppNav, hover)};
I'm trying to create a few dynamics classes width Less css.
The idea is use in html this class:
.color-white{
color: white !important;
}
I created this sintaxis in Less:
.change-color(#which; #color){
.color-#{which}{
color:#color !important;
}
.background-#{which}{
background-color:#color !important;
}
}
So, with this I want to take my idea :D
.change-color(#which: white; #color: white);
But, that is the problem, I have this:
.color-#ffffff{
color:#fff!important
}
.background-#ffffff{
background-color:#fff!important
}
How can I use "white" as string and not as hex color.
Thanks.
Call this way instead:
.change-color(#which: ~'white'; #color: ~'white');
Though I think it would be better to just create a class called .color-red explicitly rather than make things more unreadable for little reason.