Using Jeet's col() Mixin for Inline Fraction Grids in Sass

Grid classes like .col-4 or .grid__item tell the browser how to arrange content, but they also leak layout decisions into your HTML. When a designer asks for a three-column footer, you often end up editing markup instead of the component stylesheet. Jeet, a preprocessor grid system for Sass and Stylus, takes the opposite approach: you declare column widths as fractions inside your CSS using the col() mixin, keeping HTML semantic and layout logic beside the component it affects.

This post examines how Jeet's col() mixin works, walks through a minimal Sass setup, and weighs the practical trade-offs before you commit it to a project.

Why move grid widths into CSS?

Class-based grids are common because they are explicit. A <div class="col-4"> is easy to spot in markup and in browser dev tools. The downside is coupling: your HTML now knows about a 12-column system, a gutter width, and a breakpoint strategy. If the design system changes, every template may need edits.

Jeet removes layout classes from HTML. Instead, you write col(1/3) directly inside a Sass or Stylus rule. The preprocessor expands that fraction into the flexbox properties needed for a one-third column. Your markup stays semantic—a list of features is still a <ul> or a series of <article> elements—while the stylesheet owns the geometry.

How col() and nesting work

In modern Jeet versions, the col() mixin is built on flexbox. A parent container becomes a flex container, and each child receives a fraction-based width plus consistent gutters. Because flexbox handles the row layout, you avoid the clearfix and negative-margin hacks that older float-based grids required.

Nesting is where the fraction model becomes useful. You can place col(1/2) inside an element already styled with col(1/3), and Jeet produces a nested grid using the same gutter system. No extra wrapper divs or additional grid classes are needed.

Jeet also ships helper mixins such as center(), stack(), and unstack(). These let you declare container widths and responsive collapse behavior inline, keeping media queries close to the component rather than in a separate breakpoint file.

A minimal Sass example

The following illustrates the pattern. It assumes you have a Sass project and a package manager available. Because Jeet's API and preprocessor compatibility have changed across major versions, verify the installed package against your environment before relying on it.

1. Install the package. Run this in your project root:

npm install jeet --save-dev

Expected check: node_modules/jeet exists and your package.json lists the dependency. Risk: If you use Dart Sass, confirm the Jeet version you install supports it; older releases may target LibSass or node-sass. Rollback: To remove it, run npm uninstall jeet and delete the @import line from your Sass files.

2. Import and use the mixin. In a Sass partial, import Jeet and apply fractions:

// _layout.scss
@import "../node_modules/jeet/jeet";

.feature-list {
  @include center(960px);
}

.feature {
  @include col(1/3);
}

.feature-detail {
  @include col(1/2);
}

Expected check: After compiling with sass src/styles:dist/styles (run in your terminal), the generated CSS should contain flex properties on .feature and .feature-detail, not a class named col-4. Open your browser's dev tools, inspect a .feature element, and look for a flex basis or width near 33.333% with gutter spacing.

Risk: If the import path is wrong or the version expects a different entry point, Sass will throw a file-not-found or undefined-mixin error. Check the package's README or changelog for the correct import statement for your major version.

Trade-offs and limitations

Jeet keeps HTML clean, but that cleanliness has a cost. In dev tools, a Jeet column looks like any other flex item: you see .feature with flex: 0 0 33.333% (or similar), not a descriptive grid class. For a developer unfamiliar with the project, the layout system is less self-documenting than explicit class-based grids.

Native CSS Grid is now the standard approach for two-dimensional layout. It requires no preprocessor, is part of the CSS specification, and is easier to inspect because grid lines and areas are visible in modern dev tools. Jeet is best treated as a niche tool for legacy browser support or existing Sass/Stylus codebases that already depend on fraction-based workflows.

Consideration	Jeet col()	Native CSS Grid
Where layout is declared	Inside component CSS via fractions	Inside component CSS via grid properties
HTML semantics	No layout classes required	No layout classes required
Dev tool readability	Lower; geometry hidden in mixin output	Higher; grid overlays and named lines
Preprocessor dependency	Required (Sass or Stylus)	None

Maintenance is another concern. Jeet's development activity and compatibility with the latest Dart Sass or Stylus releases should be confirmed before production use. API details such as mixin names and argument order changed between major versions, so upgrading Jeet can break existing stylesheets.

Before you adopt it

If you maintain a legacy Sass codebase and value semantic HTML, Jeet's col() mixin is a pragmatic way to keep layout out of markup. Before committing, take these steps:

1. Check the Jeet package tags or changelog to confirm which major version you are installing and whether it supports your current preprocessor.
2. Build the same nested layout twice—once with Jeet fractions and once with native CSS Grid—and compare the rendered output and generated CSS size.
3. Compile a test rule using col(1/3) and inspect the resulting flexbox CSS in your browser's dev tools to confirm gutters and widths behave as expected.

Jeet will not replace CSS Grid for new projects, but for fraction-based workflows in existing preprocessor pipelines, it remains a deliberate engineering choice—one that trades a little dev-tool transparency for markup that describes content, not layout.