I'm using Flexbox and LESS to create a flexible proportional column generator.
With help of Mixins I could generate a list of CSS with percentage width:
// Mixins #mixins() { // Proportion Generator // @totalPortion: sum number of portions // @list: length of list is total number of columns and each number represents a concrete proportion // example: generator-proportion(4; 2, 1, 1) - there are 3 columns, first column has 2/4 portion and rest each has 1/4 portion .generator-proportion(@totalPortion; @list; @i: 1) when (@i =< length(@list)) { > .grid-column:nth-of-type(@{i}) { width: percentage(extract(@list, @i) / @totalPortion); } #mixins.generator-proportion(@totalPortion; @list; (@i + 1)); } } while the less part of creating a proportioned columns is:
div.section { display: flex; flex-flow: row nowrap; width: 100%; > * { flex: 1 1 auto; word-break: break-all; } &[data-column-proportion="2:1:1"] { #mixin.generator-proportion(4; 2, 1, 1); } } So if there should be a new proportional section, I just need to invoke the mixin again with corresponding proportions.
But I'm wondering how could I get the @totalPortion automatically by summing up all column portions using LESS, so that I donot need to calculate the sum everytime manually and could simplify the usage?
Top comments (0)