How to use Nested Rules in LESS for Custom Checkbox

I have used custom Check-Box with simple css rules and Font Awesome Icon:

Custom Check Box JSFiddle

But these rules applies to all checkbox in a page.

For this problem, I found that, .LESS file can produce nested css rules.

So I have made a LESS file and put custom check box rules under one class custom-checkbox.

But it does not working.

Here is my sample code for LESS file:

/*** Custom Checkboxes START ***/
.custom-checkbox {
  input[type=checkbox] {
    display: none;
  }
  /* to hide the checkbox itself */
  input[type=checkbox] + label:before {
    font-family: FontAwesome;
    display: inline-block;
  }

  input[type=checkbox] + label:before {
    content: "\f096";
  }
  /* unchecked icon */
  input[type=checkbox] + label:before {
    letter-spacing: 10px;
  }
  /* space between checkbox and label */

  input[type=checkbox]:checked + label:before {
    content: "\f046";
  }
  /* checked icon */
  input[type=checkbox]:checked + label:before {
    letter-spacing: 8px;
  }
  /* allow space for check mark */
}
/*** Custom Checkboxes END ***/

I want to apply only single custom-checkbox class defined in LESS file. which customize that check box only. How can achieve the same thing given in my JSFiddle?