I'm trying to make a mixin with multiple variables in LESS, but for some reason it's not working. I have this LESS:
.rgbabg(#r: 0, #g: 0, #b: 0, #a: .5) {
#val: rgba(#r, #g, #b, #a);
background: #val;
}
I call it like this:
.rgbabg(255, 0, 0, .5);
But I don't get any background on my element at all. Is my syntax ok?
Your syntax of your mixin is fine, and it compiles fine. I tried it out in my LESS converter and it's all good. I applied the rule to a page for an a tag selector:
a {
.rgbabg(255);
}
And it outputs:
a {
background: rgba(255, 0, 0, 0.5);
}
which colors my links just like it sounds like it should.
What version of LESS are you compiling with - what platform and version of the complier? I wouldn't recommend the Ruby compiler as I don't think it's kept up much anymore, and all the cool new features and support are on the Javascript less.js project. If you're doing it in PHP or .NET then you should check with those projects respectively.
Related
I created a hamburger menu toggle, which i am trying to make it change its color when 'dark mode' is active.
Unfortunately it isn't quite working.
the pseudo elements aren't switching back once they changed. The '.hamburger' does.
.hamburger,
.hamburger::before,
.hamburger::after {
//background: var(--clr-accent); <--- original
background-color: var(--clr-ham-toggl);
width: 2em;
height: 3px;
border-radius: 1em;
transition: transform 250ms ease-in-out;
}
.to('.hamburger', {backgroundColor: '#f6f6f6', duration: duration * 2}, 0)
.to(CSSRulePlugin.getRule('.hamburger::before'), {backgroundColor: '#f6f6f6', duration: duration * 2}, 0)
.to(CSSRulePlugin.getRule('.hamburger::after'), {backgroundColor: '#f6f6f6', duration: duration * 2}, 0)
really appreciated, if someone could point me in the right direction.
EDIT: So, it is now working via its own variable. Like so:
<button class="nav-toggle" aria-label="toggle navigation">
<span class="hamburger"></span>
</button>
.to('.nav-toggle', {"--clr-ham-toggl": "#f6f6f6"}, duration * 0.5)
There are a couple of issues here. First, you are trying to get the rule for the backgroundColor but in CSS you have a rule for background. You should animate the same rule so that the rules don't conflict.
Second, you're applying a CSS transition but then trying to animate it with GSAP. This will cause performance issues because the transition will try to apply each update when it doesn't need to.
Additionally, I highly recommend that you use GSAP's defaults because it makes using timelines even easier.
Putting those changes together, it animates!
However, as mentioned in the comment above, we at GreenSock do not recommend that you use the CSSRulePlugin for animating pseudo-elements in most cases these days because CSS variables are easier to animate and have pretty good support. If the support is good enough for your use case use this approach instead.
FYI you're more likely to get an even faster reply over on the GreenSock forums.
We're introducing a dark theme for our site that can be turned on and off on the fly, so we're using CSS custom properties. The problem is that we still have to support IE 11. IE just isn't getting the dark theme, it'll stay on the light theme, that's fine, but it means we have to duplicate all of our color properties now:
.some-icon {
color: #some-font-color;
color: var(--some-font-color);
fill: #some-font-color;
fill: var(--some-font-color);
}
This is because IE 11 will ignore the CSS custom properties and still use the first one it finds. Is there a way to use a LESS mixin or something else to automatically generate those duplicate values for us? Just a minor thing but it would save us some annoyance.
(Side note: I know there are polyfills to make CSS variables work in IE 11, we chose not to use one. We barely support it as is, no need to add a polyfill for this.)
You can use a mixin to output multiple values as such:
#red: red --red;
.color(#val) {
#val1: extract(#val, 1);
#val2: extract(#val, 2);
color: #val1;
color: var(~'#{val2}');
}
p {
.color(#red);
}
Output will be:
p {
color: red;
color: var(--red);
}
I would like to put a specific color to a svg that i insert in a PDF thanks to TCPDF
this color will allow a printer to cut automatically
I know i would have to use spotcolors.
as here: https://tcpdf.org/examples/example_037/
the SetFillSpotColor function works perfectly for text or a rectangle
but when I use ImageSVG this has no effect
i add name CutContour directly in svg, example :
<path fill="CutContour" d="M271.44,849.229c-1.254,0.174-2.604,0.489-3,0.701...
but not works too.
example my code PHP:
$pdf->AddSpotColor('CutContour', 0, 0, 0, 100);
$pdf->ImageSVG( $filename_svg , 0, 0, $largeurmm, $hauteurmm, 'CutContour', false, false, 0, false);
I can't find a solution,
can you help me?
I'm guessing you can't get away with using cutcontour as the spot color name, correct? The ImageSVG parser appears to force the color name to lowercase, which means it doesn't match against the CutContour name when it goes to look for it in the TCPDF instance's list of added spot colors.
If that guess is correct, try adding the color to the predefined list in the TCPDF_COLORS class (see spotcolor static property), either by editing include/tcpdf_colors.php or adding a line like this to your script.
TCPDF_COLORS::$spotcolor['cutcontour'] = array( 0, 0, 0, 100, 'CutContour');
$pdf->AddSpotColor('CutContour', 0, 0, 0, 100);
This way, when it goes to look for the lowercase name, it'll find a match and return the proper spot color array. (Note: Tested in TCPDF 6.2.17)
I am using Mindscape workbench and .dotless. When I code the following it works good:
#base: #f04615;
#logo {
color: saturate(#base, 5%);
background-color: darken(#base, 10%);
}
gives me:
#logo {
background-color: #C5360D;
}
However the following gives nothing and it seems like Mindscape does not even recognize fade:
#logo {
background-color: fade(#base, 10%);
}
Has anyone else had some similar problems?
Sounds like the version of less mindscape is following does not support the colour fade() functionality.
Can you please check you're using the latest version of the Web Workbench? In my version (latest version on the Visual Studio Gallery) this compiles perfectly to:
#logo {
background-color: rgba(240, 70, 21, 0.1);
}
We typically ship an update a few days after each new release of LESS (or Sass, or CoffeeScript comilers). Inside Visual Studio go to Tools -> Extension Manager and then check the "Updates" tab. It can take a few moments to check for updates so give it a moment.
If you still have problems after updating please let me know or post on our forum and we can help get you sorted.
I hope that helps.
I was storing rgba values as variables (eg: #black: rgba(0, 0, 0, 1.0);) and i realized it would be nice if i could make the alpha value variable.
So, i tried this..
.color_black (#alpha: 1.0) { rgba(0, 0, 0, #alpha) }
The problem is simply that this does not work. The parameter section seems to be right, infact it only seems to "break" once you add in the rgba() code. Less really doesn't like the rgba call.
Now i can make this work by defining the property tag, for example..
.color_black (#alpha: 1.0) { color: rgba(0, 0, 0, #alpha) }
But this sort of defeats the usefulness of storing a single color, and reusing it all over town. In backgrounds, texts, gradients, etc.
So, any thoughts on how to fix this?
edit: While i am not happy with this either.. this is the best solution i can come up with..
.color_black (#prop: color, #alpha: 1.0) { #prop: rgba(0, 0, 0, #alpha) }
It's not as useful of a function, as you can't use it in other properties (gradients, etc). Thoughts?
Take a look at less's color-functions: http://lesscss.org/#-color-functions
I think 'fade' is what you're looking for. Just set your color as a variable...
#black: #000000;
...and use fade():
color: fade(#black, 80%);
You faced this issue probably because rgba() is an internal function in less; so is hsla().
To use the mixin as a function that sets a variable as desired, you'd need to use mixins as functions feature, like below:
// mixin
.toRGBA( #color, #alpha) {
#color_plus_alpha: rgba(red(#color), green(#color), blue(#color), #alpha); //[A]
}
// usage
.someClass {
.toRGBA(orange, 0.3); // [B]
color: #color_plus_alpha; // [C]
}
The catch here is the added line [B], and the fact that you'd always need to use the variable #color_plus_alpha in [C] that is defined in the mixin on line [A].
This works at the time of this edit, and outputs the following:
.someClass {
color: rgba(255, 165, 0, 0.3);
}
However, this still does not let you assign the "output" of the mixin to an arbitrary variable as the OP desires.
Note that, red(), green() and blue() are also internal functions that spit out respectively the red, green and blue components of the input color.
Edit: Updated the answer to be a bit more reusable. The previous version would have only worked for a hard-coded property name color.