如何在LESS中使用嵌套规则自定义复选框

Question

我使用了带有简单css规则和Font Awesome Icon的自定义Check-Box：

Custom Check Box JSFiddle

但这些规则适用于页面中的所有复选框。

对于这个问题，我发现.LESS文件可以生成嵌套的css规则。

所以我制作了一个LESS文件并将自定义复选框规则放在一个custom-checkbox类下。

但它不起作用。

以下是LESS文件的示例代码：

/*** 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 ***/

我想只应用LESS文件中定义的单个custom-checkbox类。它仅自定义该复选框。如何实现JSFiddle中给出的相同内容？