Другой вариант для http://paulradzkov.com/2017/local_variables/

config.less

@glob-text-color: white;
@glob-bg-color: darkblue;

// кастомизация компонентов
.page-settings() {
  @txt-color: @glob-text-color;
  @bg-color: @glob-bg-color;
}

.page2-settings() {
  @txt-color: @glob-text-color;
  @bg-color: @glob-bg-color;
}

index.css

.page {
  padding: 40px;
  color: white;
  background-color: darkblue;
}
.page__body {
  padding: 48px;
}
.page2 {
  padding: 40px;
  color: white;
  background-color: darkblue;
}
.page2__body {
  padding: 48px;
}

index.less

@import "config";

// благодаря синтаксису &{} page.less импортируется в изолированный скоуп
// и переменные из page.less не пролезают в глобальную область видимости
& { @import "page"; }

// этот файл устроен по-другому, поэтому подключается обычным способом
@import "page2";

page.less

// если config.less уже подключается в основном файле, то этот импорт можно убрать.
// а можно и оставить, чтобы ide не ругалась на отсутствующий миксин `.page-settings()`.
@import (reference) "config";

// переменные по-умолчанию объявляем вне `&{}`.
// благодаря этому миксин `.page-settings()` сможет их переопределить.
@padding: 40px;
@txt-color: #000;
@bg-color: #fff;

// без `&{}` не получается переопределить переменные при помощи миксина.
// но если миксин `.page-settings()` не нужен, то можно убирать `&{}`, т.к. импорт делается через `& { import "page"; }`.
// так же можно весь файл обернуть в еще один `&{}` и тогда импорт в index.less можно делать обычным способом без `&{}`.
//
// плюс такого подхода: можно указывать несколько тегов с полными именами (например, `.page__body`)
// (на случай если `&__body` не подходит под styleguide)
& {
  .page-settings();

  .page {
    padding: @padding;
    color: @txt-color;
    background-color: @bg-color;
  }
  
  .page__body {
    padding: @padding * 1.2;
  }
}

page2.less

// пустой миксин. указываем на тот случай, если переопределяющий миксин не указан в конфиге
.page2-settings() {}

// благодаря `&{}` объявленные внутри переменные не выходят наружу
& {
  @padding: 40px;
  @txt-color: #000;
  @bg-color: #fff;

  // пустой миксин, переменные по-умолчанию, и переопределяющий миксин находятся в разных скоупах
  // выглядит, конечно, не очень
  & {
    .page2-settings(); // вызываем переопределяющий миксин

    .page2 {
      padding: @padding;
      color: @txt-color;
      background-color: @bg-color;
    }

    .page2__body {
      padding: @padding * 1.2;
    }
  }
}

/*
.page2-settings() {
  @padding: 40px;
  @txt-color: #000;
  @bg-color: #fff;
}

& {
  .page2-settings();

  .page2 {
    padding: @padding;
    color: @txt-color;
    background-color: @bg-color;
  }

  .page2__body {
    padding: @padding * 1.2;
  }
}
*/

В page.less используется миксин, который объявлен во внешнем файле — в config.less. Без внешнего файла компонент не сможет скомпилироваться и приходится указывать эту зависимость в @import (reference) "config";.

Компонент не должен ничего «спрашивать» про окружение и проект, в котором его используют. Вдруг конфиг называется по другому или его вообще не существует.

Я стремился изолировать каждый компонент на уровне less-исходника. Изоляция даёт возможность хранить каждый такой компонент как npm-пакет и подключать их на разных проектах.

Мне понравилась изоляция через &{} — это проще, чем делал я с detached ruleset.