Variables, Nesting & Mixins

Variables & Nesting

@primary-color: #3498db;   // @ prefix — Less's variable syntax, not $ (that's Sass)
@spacing-unit: 8px;

.card {
  padding: @spacing-unit * 2;   // native math on values with units

  .title {                 // compiles to .card .title { ... }
    font-weight: bold;
  }

  &:hover {                // & references the parent selector
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  &.active {                // .card.active
    border-color: @primary-color;
  }
}

Mixins

.flex-center(@direction: row) {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: @direction;
}

.hero {
  .flex-center(column);   // parentheses "call" the mixin
}

// Extending — merges selectors instead of copying declarations
.alert {
  padding: 12px;
  border-radius: 4px;
}
.error:extend(.alert) {
  color: red;
}

Interpolation & Imports

@name: chevron;
.icon-@{name} {
  background-image: url("icons/@{name}.svg");
}

@import "variables";           // pulls in another file's content
@import (reference) "buttons"; // import definitions WITHOUT outputting its CSS directly