I was working with custom radio buttons and checkboxes, the css is vast so I want to convert it to less way of organizing but how can I convert this statement to less
input[type='checkbox']:checked + .mycheck-overlay:before{
/*some css*/
}
any help would be greatfull....
It depends how you want to structure your LESS, the following is still valid, if you dont need any styling for the intermediate sections.
input[type='checkbox']:checked + .mycheck-overlay:before{
/*some css*/
}
However, depending on exactly which section of the rule you wish to style, in full you can break it down thusly:
input[type='checkbox']{
/* normal checkbox styles */
&:checked{
/* checked state checkbox styles */
+ .mycheck-overlay{
/* style of elements with class mycheck-overlay immediately after a checked input checkbox */
&:before{
/* the before psuedo styling for those... */
}
}
}
}
Note that you can use the ampersand & character preceding a nested rule to indicate it should be applied in conjunction with the parent selector (i.e. when the rule is compiled, no space should be left between it and the preceding selector)
