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

Popular posts from this blog

ios - UICollectionView Self Sizing Cells with Auto Layout -

node.js - ldapjs - write after end error -

DOM Manipulation in Wordpress (and elsewhere) using php -