Use Variable for Import Parameter in less

If you need to parameterize urls that will be used in the @import directive and imported into your .css files use the following.

@googlefonturl: "//fonts.googleapis.com/css?family=Roboto";
@import (css) url("@{googlefonturl}");

Which will generate the following at the top of your css output

@import url("//fonts.googleapis.com/css?family=Roboto");

The double quotes aren’t necessary but less adds them. If you wanted to pull in the remote css to your less use `(inline)` instead of css do this

@import (inline) url("@{googlefonturl}");

It is not recommended to do this with google fonts because the api uses browser sniffing so that it can the correct files for the device requesting fonts

Pass Multiple Variables to lessc Command Line Arguments

In order to pass more than one argument to the lessc compiler you need to use the option argument for each variable, for example

lessc --modify-var="bgColor=purple" --modify-var="bodyColor=aqua" custom.less test.css

Notice the “–modify-var” option being passed twice, this is because there is no separator

https://github.com/less/less.js/issues/731#issuecomment-28477515

 

jQuery .On Pass Sender Information to Handler Function

I needed to display a modal box that would pass information back to the link (sender) that was clicked. In my experience this has been handled in the past by either:

1) Creating an individual modal box for each element that would need to one, and display it when the link is clicked
2) Using a generic object to pass data back and forth from the modal to the sender

I didn’t really like either of these approaches from an efficiency/readability standpoint. Fortunately, jQuery 1.7 introduced the .On function which allows you to delegate events to their respective handlers.

My scenario is a color-picker. I only have one instance of the palette (modal) which handles all requests from senders. Here’s the code block that accomplishes everything.

 
<script type="text/javascript">
$(document).ready(function() { 
 
	$(".show").click(function(e) {
		//remove binding (off) first before binding to prevent handler from being called more than once
			$('div').off('click').on('click','a',e.target, function(e){
				//e.target passed as a parameter to handler function
				//tells us which link was clicked 
				//and which is the owner we want to update
				var sender_id = e.data.id;
				//this e.target refers to the ahref that was clicked in the div
				var color_selected = $(e.target).attr('title');
				$("#" + sender_id).css({color: color_selected }); 
		});
	return false;
	});
 
});
</script>

And the code in action:
DEMO