#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);
}
Related
I'm trying to create a dynamic css property using SASS by using mixins.
#mixin setProperty($property,$value,$unit:null){
#{$property} :$value$unit;
}
.class{
#include setProperty(position,relative);
}
This creates an output
.class {
position: relative;
}
I'm fine with this. But when i create some property for margin or padding we should include PX. So i tried something like this
.class{
#include setProperty(margin,10,px);
}
which creates output with a space in the middle as follows. How do i get rid of these space.
.class{
margin: 10 px
}
You should use interpolation to concatenate the values instead of adding, you can try this:
#mixin setProperty($property,$value,$unit:null){
#{$property} :#{$value}$unit;
}
When two distinct values are next to one another, Sass always adds a whitespace between them. With the interpolation it does not happen, Sass try to parse everything as an unquoted string.
I'm struggling with a project. I'm using the selector [href*=#{web}] on a variable that I use multiple times on an each loop. The purpose on the each loop is to go through the links on a navigation bar and give a font icon to those that align with social media platforms. The variable that is being run through are things like twitter, facebook, linkedin, and I'm trying to use it to call the url and set up the mixin included. My big problem is that everytime I try to quote the variable $web to get it to show up as a link for the css, it stops parsing the variable and becomes something like "#{$web}" in the compiled css file. What can I do to make variable compile but still quote for href?
So, something like:
$sites: ("twitter.com", "facebook.com", "linkedin.com");
#each $site in $sites {
a[href*="#{$site}"] {
background-image: url("/images/" + $site + ".png");
}
}
Results in:
a[href*="twitter.com"] {
background-image: url("/images/twitter.com.png");
}
a[href*="facebook.com"] {
background-image: url("/images/facebook.com.png");
}
a[href*="linkedin.com"] {
background-image: url("/images/linkedin.com.png");
}
Try this as your selector:
[href*="#{$web}"]
Based on some brief research, it looks like the dollar sign forces the variable value to be output.
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)";
}
I want to define a variable, which could be empty in some cases
#prefix: "";
and to use it like this
src: url("#{prefix}/path/to/something");
the problem is that it compiles into
src: url("""/path/to/something");
How to define an empty string variable, that can be compiled in
src: url("/path/to/something");
Update:
Issue closed
https://github.com/cloudhead/less.js/issues/532
Just found a way to do this... escape an empty string #prefix: ~'';
I ran into this with the box-shadow inset option that will often remain empty.
I'm not sure this is possible in less. You could make a mixin function which returns the path with the prefix prepended to it. This would be useful if you want to change the prefix once in awhile and only have to do it in one place.
.prefixRed(#path: #defaultpath) {
background: transparent url("red/#{path}");
}
.prefixBlue(#path: #defaultpath) {
background: transparent url("blue/#{path}");
}
I want to apply drop shadow filter only if the input type is Checkbox.
Following is working
input {
filter: expression("progid:DXImageTransform.Microsoft.Alpha(opacity=100)");
}
However I want to include this.type=='checkbox' in it. Some thing like this
input {
filter: expression(this.type=='checkbox' ? "progid:DXImageTransform.Microsoft.Alpha(opacity=100)":"");
}
This does not work.
You should only use expression if there is no other choice.
Try this instead:
input[type="checkbox"] {
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}
This is using the attribute selector.
You also said you're trying to apply a drop shadow - you'll have to change that Alpha filter to the DropShadow one.