Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <style type="text/less">
@sprite1: 100px;
@sprite2: 200px;
    .data-sprite(@filename) when (@filename = sprite1) {
      background: red;
    }
    .data-sprite(@filename) when (@filename = sprite2) {
      background: green;
    }
    .sprite-width(@width) {
      width: @width;
    }
    .sprite-height(@width) {
      height: @width;
    }
    .bg-icon(@filename) {
      .data-sprite(@filename);
      background-repeat: no-repeat;
      .sprite-width(@@filename);
      .sprite-height(@@filename);
    }
    html {
      .bg-icon(sprite1);
    }
    body {
      .bg-icon(sprite2);
    }
  </style>
  <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.4/less.min.js"></script>
  <title>JS Bin</title>
</head>
<body>
  Hello, Less!
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
nodgepro
0viewers