// sample-math.less: how Less's math modes treat / and *.
// Free sample from 99helpers.com/file-types/less
// Less 4 changed the default math mode, so this file compiles differently
// depending on the version and the --math option:
//   npx -y less sample-math.less                  (Less 4 default: parens-division)
//   npx -y less --math=always sample-math.less    (the Less 3 default, now deprecated)
//   npx -y less --math=parens sample-math.less    (parentheses for all maths)

@base: 24px;

.result {
  // 1. Division in parentheses: 12px in every mode
  a: (@base / 2);
  // 2. Division without parentheses: 12px with --math=always;
  //    left as "24px / 2" in the default and parens modes
  b: @base / 2;
  // 3. Multiplication without parentheses: 48px, except with --math=parens
  c: @base * 2;
}

// 4. Why the change: in CSS the slash is often a separator, not division.
.slash {
  font: 16px / 1.5 system-ui, sans-serif;
  grid-area: 1 / 2 / 3 / 4;
  aspect-ratio: 16 / 9;
}