Mixins Reference

Complete reference of @include mixins from scss/config/_mixins.scss. Ashlar separates styling into two layers: a mixin (the recipe) and a component (the default application). Import with @use 'config/mixins' as *; and apply recipes directly to your own semantic selectors.

Every visual style has two layers: a mixin (recipe) and a component (default application).

// scss/config/mixins/_table.scss
@mixin table-base {
  @include w-full;
  @include bg-primary;
  @include rounded-lg;
  // ... styles
}

// scss/components/_table.scss
table {
  @include table-base;
}

@media (max-width: 768px) {
  table { @include table-responsive; }
}

When to use which selector

Project overrides — 4 levels

Mixins NEVER contain concrete color values (#fff, rgb(), hsl(0 0% 100%)). Every color reads from a CSS custom property token: var(--color-*). This is what makes the entire system work — colors are inherited through the CSS cascade, not baked into mixin definitions.

// Hardcoded — breaks inheritance
.ln-modal header {
  background-color: hsl(var(--color-primary));
  border-bottom: none;
  color: #fff;
}

// Mixin reads tokens, project just uses it
.ln-modal header {
  @include panel-header;
}

// Want a different color? Override the token
.ln-modal {
  --color-primary: 280 60% 50%;
  // header automatically inherits
}

When to use which approach

Example: overriding btn in a project

// scss/config/_mixins.scss (ln-ashlar)
@mixin btn {
  @include flex;
  @include items-center;
  @include px(1rem);
  @include py(0.5rem);
  @include text-sm;
  @include rounded-md;
  @include cursor-pointer;
  @include transition;
  border: none;
  outline: none;
  white-space: nowrap;
}

// project/scss/_overrides.scss
@mixin btn {
  @include inline-flex;
  @include items-center;
  @include px(1.5rem);
  @include py(0.75rem);
  @include text-base;      // larger text
  @include font-medium;
  white-space: nowrap;
}

// Project selectors — UNCHANGED
#save-user   { @include btn; }
#delete-user { @include btn; }
.form-actions button { @include btn; }

How to set up the override

// project/scss/main.scss
// 1. Import ln-ashlar (loads default mixins)
@use 'ln-ashlar/scss/ln-ashlar';

// 2. Import project overrides AFTER ln-ashlar
//    This file redefines mixins with the same name
@use 'overrides';

// 3. Import project pages (use the mixins — they get the overridden version)
@use 'pages/users';
@use 'pages/dashboard';

Accept any CSS value or var(--size-*) token.

article {
  @include px(var(--size-lg));
  @include py(var(--size-md));
  @include mb(1rem);
}

Parent declares the container context, child queries it with native @container. Never combine container-type with overflow: hidden on the same element.

// Parent — declares the context
#sidebar { @include container(sidebar); }

// Child — queries the container
#sidebar nav {
  @container sidebar (min-width: 580px) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

Standard breakpoints

Grid-based expand/collapse animation. Uses grid-template-rows: 0fr/1fr transition.

.my-panel          { @include collapsible; }
.my-panel > section { @include collapsible-content; }

// Responsive grid
#products { @include grid; }

// Form layout — 6 columns
#my-form {
  @include form-grid;
  > label { grid-column: span 3; }            // half
  > label:nth-child(3) { grid-column: span 6; } // full
  > .form-actions { grid-column: span 6; }
}

// Semantic usage
#user-profile { @include section-card; }

// Card variants — color via --color-primary override
#alerts  { @include card; @include card-accent-top; --color-primary: var(--color-error); }
#status  { @include card; @include card-accent-left; --color-primary: var(--color-success); }
#welcome { @include card; @include card-bg; }
#archive { @include card; @include card-stacked; }

Two-tier system: structure is global, color is semantic.

Global button tiers

Live demo

Color change — override --color-primary

Set --color-primary on the element or any parent. All states (hover, active, focus-ring) adapt automatically.

/* Project semantic selectors — correct approach */
#delete-user  { @include btn; --color-primary: var(--color-error); }
#approve-user { @include btn; --color-primary: var(--color-success); }

/* Context override — all submit + action buttons inside change */
.danger-zone  { --color-primary: var(--color-error); }

/* Custom brand color */
:root { --color-brand: 280 60% 50%; }
.brand-section { --color-primary: var(--color-brand); }

All form mixins live in scss/config/mixins/_form.scss. The component file scss/components/_form.scss applies them to default element selectors.

// Library default — already applied
input, textarea, select { @include form-input; }
input[type="checkbox"]  { @include form-checkbox; }
label                   { @include form-label; }

// Project override — custom form
#audit-form {
  @include form-grid;
  label { grid-column: span 3; }
  .form-actions { grid-column: span 6; }
}

// Pill outline variant — standalone on label
#role-selector label { @include pill-outline; }

All table mixins live in scss/config/mixins/_table.scss. The component file applies table-base and table-responsive to the table element.

// Library default — already applied
table { @include table-base; }
@media (max-width: 768px) { table { @include table-responsive; } }

// Project — striped table with section headers
#server-status {
  @include table-base;
  @include table-striped;
  tr[data-section] td { @include table-section-header; }
  td a { @include table-action; }
}

// Breadcrumbs — library applies to .breadcrumbs
// HTML: <nav class="breadcrumbs" aria-label="Breadcrumb">
//           <ol>
//               <li><a href="#">Home</a></li>
//               <li><a href="#">Users</a></li>
//               <li aria-current="page">Edit</li>
//           </ol>
//       </nav>

// Loader — project applies to its own selector
#loading { @include loader; }

// Avatar — profile button with image + name/role
<button class="avatar">
    <img src="avatar.jpg" alt="">
    <span>Sojic<small>Administrator</small></span>
</button>

// As dropdown trigger
<div data-ln-dropdown>
    <button class="avatar" data-ln-toggle-for="user-menu">
        <img src="avatar.jpg" alt="">
        <span>Sojic<small>Administrator</small></span>
    </button>
    <ul id="user-menu" data-ln-toggle>
        <li><a href="#">Edit Profile</a></li>
        <li><a href="#">Logout</a></li>
    </ul>
</div>

// Sidebar — parent handles layout & bg
aside { @include flex-col; @include h-full; @include bg-primary; }
aside nav { @include nav; }

// Header nav — same mixin, different context
#header nav { @include nav; }

// In HTML:
// <nav data-ln-nav="active">
//   <ul>
//     <li><a href="/">
//       <span class="nav-icon ln-icon-home"></span>
//       <span class="nav-label">Dashboard</span>
//     </a></li>
//   </ul>
// </nav>