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.
Related
Does anyone have any ideas why I'm getting this error when using compass watch and compiling this SASS code?
/* Error: Invalid CSS after "...176b, vertical)": expected expression
(e.g. 1px, bold), was "; // IE6-9"
on line 2 of assets/sass/theme.sass
body {
#include filter-gradient(#0b0039, #2b176b, vertical); // IE6-9
#include background-image(linear-gradient(top, rgba(11,0,57,1) 0%,rgba(40,22,99,1) 65%,rgba(43,23,107,1) 100%));
}
I also get it on the includes if I remove the background-color so not sure what's happening here.
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.
Using variable on mixin or extend in Less.js as follow will throw error.
#bar : bar;
.#{bar} {
background: yellow;
}
// ParseError: Missing closing ')'
.foo {
.#{bar}();
}
// Not work
.jam {
&:extend(.#{bar});
}
Has Less.js a proper syntax to call mixin with variables?
You are trying to call a mixin using selector interpolation, which is not possible.
As for extend, Less documentation states it clearly:
Extend is NOT able to match selectors with variables. If selector contains variable, extend will ignore it.
I'm quite new to Sass so I don't quite know everything about it yet.
My idea is that I create a mixin like so;
#mixin crossBrowser($css) {
-webkit-+$css;
-moz-+$css;
-o-+$css;
$css;
}
and then use it by #include crossBrowser("transition: 0.2s ease-out");.
I think you can see where I'm trying to go here, is it possible? Or do I have to create a new mixin for every CSS3 property I want to include?
Solved it like this;
#mixin crossBrowser($property, $css) {
-webkit-#{$property} : $css;
-moz-#{$property} : $css;
-o-#{$property} : $css;
#{$property} : $css;
}
Then calling it by #include crossBrowser(transition, 0.2s ease-out);
Early 2017 edit
You should now write your CSS without vendor prefixes and then use a tool like https://autoprefixer.github.io to add prefixes.
#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);
}