I'm trying to create a LESS mixin into which I can pass a text string to be used to construct an svg file name and a png file name.
My first attempt is below. Perhaps you can see what I'm trying to do.
.make-bg-svg(#name){
#svg: ~"../images/#{name}.svg";
#png: ~"../images/#{name}.png";
height: 200px;
background: transparent url(~"#{svg}");
.no-svg & {
background: transparent url(~"#{png}") no-repeat;
}
}
// usage
.out-of-business {
.make-bg-svg('out-of-business');
}
Any help would be appreciated.
Updated
I just figured it out and updated the example above.
Just in case you don't need that many quotes, the following is equal:
.make-bg-svg(#name) {
#svg: ~"../images/#{name}.svg";
#png: ~"../images/#{name}.png";
height: 200px;
background: transparent url(#svg);
.no-svg & {
background: transparent url(#png) no-repeat;
}
}
// usage
.out-of-business {
.make-bg-svg(out-of-business);
}
Related
How to apply background image from local drive instead of internet. Where is the mistake?
I have tried this way, it is success. (URL from Internet)
body.my-login-page {
background: url(https://hdwallsource.com/img/2014/9/green-gradient-wallpaper-26051-26736-hd-wallpapers.jpg) #277214 no-repeat;
}
But this method is unsuccessful. (path from Local)
body.my-login-page {
/* background-color: #6aaaeb; */
background: url(/images/green_wallpaper.jpg) #277214 no-repeat;
}
My answer, just apply as david said above with double dot ".."
body.my-login-page {
background: url(../images/green_wallpaper.jpg) #277214 no-repeat;
}
It should work if you use a full file path, or add a "..".
Full File Path Example: C:\Users\Photos\image.png
".." Example: ../Photos/image.png
Comment on this post if that does not work, but in the past, that has worked for me. Also, I would suggest using <img src="/images/file.png"></img>, since in my experience it has better compatibility.
Here is a fixed version of your example, using both of the methods I stated:
".." Example:
body.my-login-page {
background: url(../images/green_wallpaper.jpg) #277214 no-repeat;
}
Full File Path Example:
body.my-login-page {
background: url(C:/<INSERT PATH>/images/green_wallpaper.jpg) #277214 no-repeat;
}
What I basically want to do
#gradientType: radial-gradient;
background: #gradientType(to bottom, ...)
I want to put a CSS Function, a gradient in this case (btw: are these called functions? I'm not sure) in a Less variable and call it later with the variable like #variable()?
Why? Maintainability!
I have a file variables.less where I want to change to gradient (ie) for a couple of places on the fly.
So instead of
.a { background: linear-gradient(..) }
.b { background: linear-gradient(..) }
.c { background: linear-gradient(..) }
I would have something like
.a { background: #myGradient(..) }
.b { background: #myGradient(..) }
.c { background: #myGradient(..) }
Linear gradients (linear-gradient(to bottom, red, blue)) and Radial gradients (radial-gradient(circle, red, blue)) kind of have the same syntax. So I would have four variables like gradientType, gradientOpts, gradientStart, gradientStop and change the gradient type based on the variable. This is just a simplified example.
To answer your question directly, you can use variable interpolation to achieve this.
#myGradient: radial-gradient;
.a { background: ~"#{myGradient}(to bottom, red, blue)"; }
.b { background: ~"#{myGradient}(to bottom, green, yellow)"; }
.c { background: ~"#{myGradient}(to bottom, orange, gold)"; }
But I would suggest using something like a parameterized mixin to handle things like this. Below is the code for a sample mixin which creates either a radial-gradient or linear-gradient depending on the input variable.
#gradType: linear-gradient;
.a { .background(#gradType; to bottom; red; blue); }
.b { .background(#gradType; to bottom; green; yellow); }
.c { .background(#gradType; to bottom; orange; gold); }
.background(#gradType; #gradOpts; #gradStart; #gradEnd){
& when (#gradType = linear-gradient){
background: linear-gradient(#gradOpts, #gradStart, #gradEnd);
}
& when (#gradType = radial-gradient){
background: radial-gradient(#gradOpts, #gradStart, #gradEnd);
}
}
The catch with using guarded mixins (like the above) is that when the #gradType variable has a value outside of the two possible ones (say conical-gradient was the value) then the code would just fail and will not cause any errors to be thrown. This would be a problem when you're writing a library that is going to be used by others (and so want to throw an error when the value is invalid). In such cases, you could change the code like given below. When this approach is used, Less compiler would throw an error when an invalid input value is provided for the #gradType variable.
#gradType: linear-gradient;
.a { .background(#gradType; to bottom; red; blue); }
.b { .background(#gradType; to bottom; green; yellow); }
.c { .background(#gradType; to bottom; orange; gold); }
.background(linear-gradient; #gradOpts; #gradStart; #gradEnd){
background: linear-gradient(#gradOpts, #gradStart, #gradEnd);
}
.background(radial-gradient; #gradOpts; #gradStart; #gradEnd){
background: radial-gradient(#gradOpts, #gradStart, #gradEnd);
}
I am using the toastr js plugin - toastr - and have made a css color change, however, I do not know how to go about creating the correct png/base64 part?
Original :
.toast-info {
background-color: #2f96b4;
}
#toast-container > .toast-info {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
}
I have changed this color to :
.toast-info {
background-color: #3276b1;
}
I actually contacted the github location awhile back and never got a response other than contact SO haha. For sake of having things correct I would like to make sure the base64 part corresponds to the new color.
EDIT - further info :
In response to the answer below. I believe you are incorrect. Correct me if I am wrong, but the background-image is basically a backup so it shows correctly in all browsers and does indeed reflect the color. Based on your comments... if that were true then this background image would not be needed at all and, if anything, would be the same for each color. As you can see this is not the case.
Here is the full css including my added info2 with the new color. So, basically the question holds. How can I create the correct base64 background image with my new color?
#toast-container > .toast-info {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
}
#toast-container > .toast-info2 {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
}
#toast-container > .toast-error {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
}
#toast-container > .toast-success {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
}
#toast-container > .toast-warning {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
}
.toast {
background-color: #030303;
}
.toast-info {
background-color: #3276b1;
}
.toast-info2 {
background-color: #2f96b4;
}
.toast-error {
background-color: #bd362f;
}
.toast-success {
background-color: #51a351;
}
.toast-warning {
background-color: #f89406;
}
I use custom toast with this css and javascript
toastr.success("text", "title", {"iconClass": 'customer-info'});
css:
/* icon */
#toast-container > .customer-info {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
background-color: dodgerblue;
}
The background image is not the background color. If you want to change the color, you already have it with background-color. If you want to change the background image, then you can set the url or base64. If you want an easy way to convert to base64,
use Visual Studio
install Web Essentials plug in
set the url to the file
right click on the url and Web Essentials menu will let you convert to base64
I want to create something like a themepicker. I use LESS.css.
LESS.css has a variable which contains the main colors :
#colorOne: #222;
#colorTwo: #fff;
#darkGradientStart: lighten(#colorOne, 10%);
#darkGradientStop: lighten(#colorOne, 5%);
#lightGradientStart: #colorTwo;
#lightradientStop: darken(#colorTwo, 7%);
I want to change them if the tag has the color-class like this:
<body class='theme-blue'>
then I have written this in my less.css (after the default variables)
.theme-blue{
#colorOne: blue;
}
but it still uses the default #222. It is not overwritten.
How can I solve this problem?
Thanks
You cannot overwrite variables in LESS (within the same scope). The documentation specifically says:
Note that variables in LESS are actually ‘constants’ in that they can only be defined once.
For what you desire, you need to do a mixin:
Example LESS Code
.colorDefs(#c1: #222, #c2: #fff) {
#colorOne: #c1;
#colorTwo: #c2;
#darkGradientStart: lighten(#colorOne, 10%);
#darkGradientStop: lighten(#colorOne, 5%);
#lightGradientStart: #colorTwo;
#lightGradientStop: darken(#colorTwo, 7%);
}
.theme-blue {
//import color definitions
.colorDefs(blue, yellow);
// use them
color: #colorOne;
background-color: #colorTwo;
.gradient1 {
background-image: linear-gradient(top, #darkGradientStart, #darkGradientStop);
}
.gradient1 {
background-image: linear-gradient(top, #lightGradientStart, #lightGradientStop);
}
}
.theme-green {
//import different color definitions
.colorDefs(green, red);
// use them
color: #colorOne;
background-color: #colorTwo;
.gradient1 {
background-image: linear-gradient(top, #darkGradientStart, #darkGradientStop);
}
.gradient1 {
background-image: linear-gradient(top, #lightGradientStart, #lightGradientStop);
}
}
Example CSS Output
.theme-blue {
color: #0000ff;
background-color: #ffff00;
}
.theme-blue .gradient1 {
background-image: linear-gradient(top, #3333ff, #1a1aff);
}
.theme-blue .gradient1 {
background-image: linear-gradient(top, #ffff00, #dbdb00);
}
.theme-green {
color: #008000;
background-color: #ff0000;
}
.theme-green .gradient1 {
background-image: linear-gradient(top, #00b300, #009a00);
}
.theme-green .gradient1 {
background-image: linear-gradient(top, #ff0000, #db0000);
}
Solving 4K (i.e. a lot of) Lines of Code
ed1nh0 commented about having 4K lines of code using the color variables, and not being able to "put that in a mixin." Let me make a few comments on that:
If 4K lines of code depend upon the body class to define the colors, then it is probably best to split each color into its own css file, and only load that file as needed (i.e. not grouping every code color into one file). This then calls into question whether you really want to be controlling color by body class.
Regardless of whether one does what is recommended in 1., I believe one could still handle this with 4K of lines that use the colors. I believe the issue is not in using a mixin to define the color values themselves (i.e. not 4K lines of color variable definitions), but rather in the 4K lines of properties, classes, etc. that need repeating that are using the colors. But that repetition can be handled just as easily by wrapping it all in a mixin also. So my original answer above could be abstracted further to this (note that .colorDefs is the same as above and not repeated here):
LESS
.themeProperties() { // Imagine inside here the 4K lines of code
// use them
color: #colorOne;
background-color: #colorTwo;
.gradient1 {
background-image: linear-gradient(top, #darkGradientStart, #darkGradientStop);
}
.gradient1 {
background-image: linear-gradient(top, #lightGradientStart, #lightGradientStop);
}
}
.theme-blue {
//import color definitions
.colorDefs(blue, yellow);
.themeProperties(); //4K lines repeated here
}
.theme-green {
//import different color definitions
.colorDefs(green, red);
.themeProperties(); //4K lines repeated here
}
The above does assume that there are not differences in how the variables are used by the properties, just what the values of those properties are. If there were any "differences," then some tweaking mixins may need to be done for certain situations, but the concept should still hold.
What you are doing would get compiled like this in css:
.theme-blue{
#222: blue;
}
See why it doesn't work now? :)
If you are trying to override the color style, you should do it the usual css way:
.theme-blue{
color: blue;
}
#blue:#0000FF;
#green:#00FF00;
.theme-blue {
color:#blue;
}
.theme-green {
color:#green;
}
I'm kind of new to Sass, but I'm attempting to create a workflow for myself. I generate "color packs" for my theme designs and need to specify the following variables for my mixin. Is there a better way to do this?:
// folder,filename,extension,repeat,x-pos,y-pos
#mixin background ($folder:style1, $img:file, $type:png, $repeat:no-repeat, $x:0, $y:0) {
background-image: url(./images/#{$folder}/#{$img}.#{$type});
background-repeat: #{$repeat};
background-position: #{$x}px #{$y}px;
}
I'm inserting like so:
#nav {
#include background(style2,myimage,png,repeat-x,10,10);
}
which yields this:
#nav {
background-image: url(./images/style2/myimage.png);
background-repeat: repeat-x;
background-position: 10px 10px;
}
I'd prefer to use CSS shorthand when possible, but I ran into errors with the output. I'd appreciate any expert advice if this is not the best way to do it.
depending on how your packs are structured/applied you might be able to use a loop to generate a bunch of generic styles. See the documentation here: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#id35
Do you really need 3 separate components to get your image url? wouldn't: $img and then setting that to /folder/img.ext be far easier?
Also, you don't need the #{} for repeat by the way.
I hope this is what you're after… the question is not very specific in terms of what you need the outcome to actually be.
Cheers,
Jannis
Update:
Okay, I see you've updated your question (thanks for that). I believe this could be a little better for general use:
#mixin background($imgpath,$position:0 0,$repeat: no-repeat) {
background: {
image: url($imgpath);
position: $position;
repeat: $repeat;
}
}
.testing {
#include background('/my/img/path.png');
}
This will then output:
.testing {
background-image: url("/my/img/path.png");
background-position: 0 0;
background-repeat: no-repeat;
}
Or you can use the shorthand version:
#mixin backgroundShorthand($imgpath,$position:0 0,$repeat: no-repeat) {
background: transparent url(#{$imgpath}) $repeat $position;
}
.testing2 {
#include backgroundShorthand('/my/img/path.png');
}
Which will generate:
.testing2 {
background: transparent url(/my/img/path.png) no-repeat 0 0;
}
Lastly if you want to specify your base path to your image directory separately you can do the following:
$imagedir:'/static/images/'; // define the base path before the mixin
#mixin backgroundShorthandWithExternalVar($filename,$position:0 0,$repeat: no-repeat) {
background: transparent url(#{$imagedir}#{$filename}) $repeat $position;
}
.testing3 {
#include backgroundShorthandWithExternalVar('filename.png');
}
This will then generate:
.testing3 {
background: transparent url(/static/images/filename.png) no-repeat 0 0;
}
Is this what you needed?
If not feel free to update the question or reply/comment.
some other sample:
path to the image:
$path--rel : "../images";
color
$black: #000000;
creating the mixin:
#mixin background-image($img, $background-position, $background-color) {
background-image: url('#{$path--rel}/#{$img}');
background-repeat: no-repeat;
background-position: $background-position;
background-color: $background-color ;
}
using the mixing:
.navbar-inverse {
#include background-image("header.png", right, $black);
}
result:
.navbar-inverse {
background-image: url("../images/header.png");
background-repeat: no-repeat;
background-position: right;
background-color: #000000;
}
take one $var and it will make it easier for you.
$list: pranav shah
=author-images
#each $author in $list
.photo-#{$author}
background: image-url("avatars/#{$author}.png") no-repeat
.author-bio
+author-images
css
.author-bio .photo-adam {
background: url('/images/avatars/adam.png') no-repeat;
}
.author-bio .photo-john {
background: url('/images/avatars/john.png') no-repeat;
}
.author-bio .photo-wynn {
background: url('/images/avatars/wynn.png') no-repeat;
}
.author-bio .photo-mason {
background: url('/images/avatars/mason.png') no-repeat;
}
.author-bio .photo-kuroir {
background: url('/images/avatars/kuroir.png') no-repeat;
}