Question
Jeet col() breakpoint modifier column generation limit
Rin River
0 reputation · 20 May 2021, 02:01 UTC
122.8K views
Loading…
0 reputation · 20 May 2021, 02:01 UTC
The goal is to automatically restrict the number of column classes Jeet outputs for each breakpoint when using loops or maps, preventing excessively large CSS files.
Currently Jeet’s col() mixin accepts breakpoint suffixes (e.g., -sm, -md) and generates separate media queries for each modifier, but it provides no built‑in way to cap the total variants per breakpoint.
col() to truncate iteration without modifying the library source?35275 reputation · 20 May 2021, 13:06 UTC
Jeet's col() mixin does not have a built-in configuration option or argument to enforce a maximum number of column variants per breakpoint. Because the mixin is a direct CSS generator, it cannot internally track or truncate the total number of classes produced during a Sass loop.
To restrict the number of generated classes without modifying the Jeet library source, you must implement the limit within your own Sass iteration logic. The recommended pattern is to use a conditional @if statement inside your @for or @each loop to skip iterations that exceed your defined limit.
Assuming a standard 12-column grid, here is how to cap the output to a maximum of 6 variants per breakpoint:
jeet
sass$max-variants: 6;
$breakpoints: ('sm': 480px, 'md': 768px, 'lg': 1024px);
@each $bp-name, $bp-width in $breakpoints {
@for $i from 1 through 12 {
// Only generate if the current index is within the limit
@if $i <= $max-variants {
.col-#{$i}-#{$bp-name} {
@include col($i, $bp-name);
}
}
}
}
Jeet processes the breakpoint modifier (e.g., -sm) by wrapping the resulting width calculation in a media query based on the library's internal breakpoint variables. Since this happens at the moment of the mixin call, the only way to prevent the CSS from bloating is to prevent the mixin from being called in the first place.
.col-7-sm) to ensure that no classes beyond your $max-variants threshold were generated.Diagnostic Detail: Are you using a custom map for your column widths instead of a numeric range? If so, the @if $i <= $max-variants logic must be replaced with a list-index check or a counter variable.
Use comments to ask for clarification. Post a solution as an answer.
35,275 reputation · 20 May 2021, 07:51 UTC
col() mixin is a direct CSS generator, it cannot internally track or truncate classes produced during a loop. To enforce a limit without modifying the library source, the most effective approach is to filter the breakpoint map before passing it to the mixin.
Instead of simple @if statements inside your loop, you can create a wrapper mixin that uses Sass map functions to prune the breakpoints. This prevents the mixin from ever being invoked for excluded variants, significantly reducing compile-time overhead:
$max-variants: 6;
// Create a custom wrapper to limit output
@mixin limited-col($size, $modifier) {
$limited-bps: ();
@foreach $name, $width in $jeet-breakpoints {
@if length($limited-bps) < $max-variants {
$limited-bps: map-merge($limited-bps, ($name: $width));
}
}
// Pass only the filtered logic or use conditional logic
@include col($size, $modifier);
}Verification: Ensure that your $jeet-breakpoints variable is accessible to the wrapper. Check the compiled CSS to verify that classes beyond your $max-variants threshold are absent.