css - Creating multiple classes with LESS function -
i want accomplish css (and more not posted brevity) less can have more control , auto creation of classes. not sure how less can me it.
.m-xs { margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px; } .m-t-xs{ margin-top: 5px; } .m-r-xs{ margin-right: 5px; } .m-b-xs{ margin-bottom: 5px; } .m-l-xs{ margin-left: 5px; } .m-h-xs{ margin-right: 5px; margin-left: 5px; } .m-v-xs{ margin-top: 5px; margin-bottom: 5px; }
i want repeated several sizes (xs, s, m, l, xl, etc) , other properties padding.
how can use less kind of 'autocreate' thing ? possible without writing classes? never used less see heavy use of on bootstrap , think can achieved. tested few things looks it's advanced scenario because none of tutorials have covered.
thanks!
to generate classes you've mentioned there try parameterised mixins:
.classes (@size) { .m-@{size} { margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px; } .m-t-@{size}{ margin-top: 5px; } .m-r-@{size} { margin-right: 5px; } .m-b-@{size} { margin-bottom: 5px; } .m-l-@{size} { margin-left: 5px; } .m-h-@{size} { margin-right: 5px; margin-left: 5px; } .m-v-@{size} { margin-top: 5px; margin-bottom: 5px; } } .classes(xs); .classes(s); .classes(m); .classes(l); .classes(xl);
further parameterising necessary.
Comments
Post a Comment