So I just tried using LESS today. Based on examples available in official website, I've managed to script my CSS like below. But there's single line that not work like I want, which I want to convert color type variable to string (wrapped with single quotes).
I have color variable, for example:
#colorA: #f7fcff;
#colorB: #f2faff;
I want to convert them to string, so I can use in filter CSS e.g.:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#colorA', endColorstr='#colorB', GradientType=0 );
But that not work. So, how?
You need to use string interpolation syntax there like #{}
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#{colorA}', endColorstr='#{colorB}',
GradientType=0 );
Compiled:
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#f7fcff', endColorstr='#f2faff',
GradientType=0);
Related
I have a Sass variable which mapped to an hsl value. When I try to use it with hsla to add a little transparency, doesn't work. I'm doing this:
$white:hsl(100, 100%, 100%);
.thing{
color:hsla($white,.9);
}
Using gulp-sass to build my CSS, I get this error: "required parameter $lightness is missing in call to function hsla on line {line number} in {file's path}"
If I replace the hsla with rgba it works fine and, yes, I can do that, but I'd like to keep all my colors in hsl. Is there a workaround or is this a Sass issue?
It's not an issue with SASS, the functionality simply doesn't exist. If you look at the documentation, there are two versions of rgba(), one that accepts all of the parameters separately and one that accepts a Color object.
rgba($red, $green, $blue, $alpha)
rgba($color, $alpha)
If you look at the documentation for hsla(), it only accepts the values separately.
hsla($hue, $saturation, $lightness, $alpha)
To achieve your goal, you could do this:
$white:hsl(100, 100%, 100%);
.thing{
color: hsla(hue($white), saturation($white), lightness($white), .9);
}
Or... if you want to pass the Color object, you can create your own function since you can't overload functions; e.g. hslac($color, $alpha)
#function hslac($color, $alpha) {
#if(type-of($color) == "color") {
#return hsla(hue($color), saturation($color), lightness($color), $alpha);
}
#else {
#error "You didn't pass a color object";
}
}
I'm trying to create a mixin for grayscaling an html element.
In CSS way, it should be :
filter: grayscale(50%);
My mixin :
#mixin grayscale_element($value) {
-webkit-filter: grayscale($value);
-moz-filter: grayscale($value);
filter: grayscale($value);
}
My error :
Fatal error: Uncaught exception 'SassScriptFunctionException' with message 'SassNumber must be a SassColour
Source: -webkit-filter: grayscale($value)'
Problem is, in sass grayscale is already a function, and paramter should be a color.
Module: Sass::Script::Functions - Sass Documentation
How can I use these filter in a mixin ?
Note: I'm using phpsass.
If you just want to avoid the grayscale function being evaluated as a Sass function use string interpolation. Something like this:
filter: #{"grayscale(#{$value})"};
if $value is set to 50% the CSS output will be:
filter: grayscale(50%);
Demo
The code works fine for me as long as I included the mixin like:
#include grayscale_element(100%);
When a string was passed to the mixin, it failed as you mentioned.
$val: 100%;
#include grayscale_element(#{$val});
Type should be estimated.
By using Less I need to escape a string which LESS doesn’t recognize.
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#26ffffff, endColorstr=#24ffffff)";
At the same time I need to pass two variables startColor and endColor to this string
.get-ARGB(#startColor, #endColor){
/* ARGB backgrounds for IE 7+8 (black background with 50% transparancy) */
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#startColor, endColorstr=#endColor)";
}
Any ideas how can I do it?
Use string interpolation:
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#{startColor}, endColorstr=#{endColor})";
I'm having some trouble getting .LESS to recognize that there is a variable in a string. Here is my current code
filter: progid:DXImageTransform.microsoft.gradient(startColorstr='#{startColor}', endColorstr='#{endColor}', GradientType=0);
#startColor and #endColor are both variables.
How can I place a .LESS variable inside a string?
EDIT:
I fixed it (I think..) Here is the end code that works for me
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#startColor, endColorstr=#endColor, GradientType=0);
Try:
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#{startColor}', endColorstr='#{endColor}', GradientType=0)"
The tilda and quotes allow you actually escape code for just this situation. I also end up using for my opacity stuff but that is because I want to reusing the word opacity as the function name.
filter: ~"alpha(opacity=#{op})! important"
It´s best to escape the entire filter property using: ~"filter" and wrapping the less variable (without the "#" symbol) in curly brackets.
I´ve created a mixins that properly transform a color and opacity values into a rgba and an argb values respectively:
.rgba(#color, #opacity) {
#rgba: fade(#color, #opacity);
#ieColor: argb(#rgba);
background-color: #rgba;
filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='#{ieColor}', endColorstr='#{ieColor}',GradientType=0)";
}
#mixin f1($color1, $color2){
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color1', endColorstr='$color2',GradientType=0);
}
What i want to do is escape the apostrophe's ability of turning $color1 into a string.
startColorstr='$color1' into startColor1str='#000000'.
#mixin f1($color1, $color2){
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=+"'"+$color1+"'"+, endColorstr=+"'"+$color2+"'"+,GradientType=0);
}
this didnt work
apparently i had to add the variable inside brackets like '{$color}' but still that wouldnt work alone.
i had to also add a '#' (hash) as well like '#{$color}' (even though i was passing the value of "#333" in the mixin, it still required the #
So the result looks something like this:
#mixin f1($color1,$color2){
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$color1}', endColorstr='#{$color2}',GradientType=0);
}