Использовать css переменные для @offset и не только

[Egrom92]

На данный момент, если у меня к примеру на каждом брейкпойнпе меняется офсет, то мне приходится дублировать код, для того чтобы перебивать предыдущий офсет.

Вот пример офсета, что у меня сейчас в проекте:

@offset: 24px;
@offset_lg: @offset;
@offset_md: 18px;
@offset_sm: 14px;
@offset_xs: 5px;

Сейчас, в случае, если я пропишу просто

  .col();
  .size(12);

Тогда у меня на xs ширине экрана будет такая запись: width: calc(83.33333333333334% - 24px);
А на самом деле, нужная мне запись должна быть такая: width: calc(83.33333333333334% - 5px);

Для того чтобы у меня верная запись была, мне нужно по сути продублировать код для каждого брейкпойнта:

  .col();
  .size(12);
  .size-lg(12);
  .size-md(12);
  .size-sm(12);
  .size-xs(12);

Моё предложение, использовать для этого стандартные css переменные.

Запись будет примерно вот такой:

:root {
  --offset: @offset;
}
.lg-block({
  :root {
    --offset: @offset_lg;
  }
});
.md-block({
  :root {
    --offset: @offset_md;
  }
});
.sm-block({
  :root {
    --offset: @offset_sm;
  }
});
.xs-block({
  :root {
    --offset: @offset_xs;
  }
});


.size(@n){
  @val: 100% / @columns * @n;
  width: ~"calc(@{val} - var(--offset))";
}

.size-lg(@n){
  @val: 100% / @columns * @n;
  .lg(width, ~"calc(@{val} - var(--offset))");
}

.size-md(@n){
  @val: 100% / @columns * @n;
  .md(width, ~"calc(@{val} - var(--offset))");
}

.size-sm(@n){
  @val: 100% / @columns * @n;
  .sm(width, ~"calc(@{val} - var(--offset))");
}

.size-xs(@n){
  @val: 100% / @columns * @n;
  .xs(width, ~"calc(@{val} - var(--offset))");
}

В итоге результат будет таким, что мне будет достаточно просто прописать .size(12); и у меня будет подставлять верные офсеты на нужном мне брейкпойнте.

На данный момент переменные не поддерживается синим другом и мини оперой. Можно на такой случай сделать некий параметр, при настройке сетки: supportAllBrowsers: true / false дефолтно будет false и будет использованы стандартные css переменные. В случае true, стандартные переменные не будут использоваться и придётся руками дублировать код.

Ну и ясное дело, что это можно применить не только к офсетам =)

[Egrom92]

Так же вот так могли бы выглядеть отступы:

.shift(@n){
  @val: 100% / @columns * @n;
  margin-left: ~"calc(@{val} + var(--offset_one_side))";
  margin-right: ~"calc(@{val} + var(--offset_one_side))";
}

.shift-left(@n){
  @val: 100% / @columns * @n;
  margin-left: ~"calc(@{val} + var(--offset_one_side))";
}

.shift-right(@n){
  @val: 100% / @columns * @n;
  margin-right: ~"calc(@{val} + var(--offset_one_side))";
}

.shift-padding(@n){
  @val: 100% / @columns * @n;
  padding-left: ~"calc(@{val} + var(--offset_one_side))";
  padding-right: ~"calc(@{val} + var(--offset_one_side))";
}

.shift-padding-left(@n){
  @val: 100% / @columns * @n;
  padding-left: ~"calc(@{val} + var(--offset_one_side))";
}

.shift-padding-right(@n){
  @val: 100% / @columns * @n;
  padding-right: ~"calc(@{val} + var(--offset_one_side))";
}

.shift-lg(@n){
  @val: 100% / @columns * @n;
  .lg(margin-left, ~"calc(@{val} + var(--offset_one_side))");
  .lg(margin-right, ~"calc(@{val} + var(--offset_one_side))");
}

.shift-lg-left(@n){
  @val: 100% / @columns * @n;
  .lg(margin-left, ~"calc(@{val} + var(--offset_one_side))");
}

.shift-lg-right(@n){
  @val: 100% / @columns * @n;
  .lg(margin-right, ~"calc(@{val} + var(--offset_one_side))");
}

.shift-lg-padding(@n){
  @val: 100% / @columns * @n;
  .lg(padding-left, ~"calc(@{val} + var(--offset_one_side))");
  .lg(padding-right, ~"calc(@{val} + var(--offset_one_side))");
}

.shift-lg-padding-left(@n){
  @val: 100% / @columns * @n;
  .lg(padding-left, ~"calc(@{val} + var(--offset_one_side))");
}

.shift-lg-padding-right(@n){
  @val: 100% / @columns * @n;
  .lg(padding-right, ~"calc(@{val} + var(--offset_one_side))");
}

.shift-md(@n){
  @val: 100% / @columns * @n;
  .md(margin-left, ~"calc(@{val} + var(--offset_one_side))");
  .md(margin-right, ~"calc(@{val} + var(--offset_one_side))");
}

.shift-md-left(@n){
  @val: 100% / @columns * @n;
  .md(margin-left, ~"calc(@{val} + var(--offset_one_side))");
}

.shift-md-right(@n){
  @val: 100% / @columns * @n;
  .md(margin-right, ~"calc(@{val} + var(--offset_one_side))");
}

.shift-md-padding(@n){
  @val: 100% / @columns * @n;
  .md(padding-left, ~"calc(@{val} + var(--offset_one_side))");
  .md(padding-right, ~"calc(@{val} + var(--offset_one_side))");
}

.shift-md-padding-left(@n){
  @val: 100% / @columns * @n;
  .md(padding-left, ~"calc(@{val} + var(--offset_one_side))");
}

.shift-md-padding-right(@n){
  @val: 100% / @columns * @n;
  .md(padding-right, ~"calc(@{val} + var(--offset_one_side))");
}

.shift-sm(@n){
  @val: 100% / @columns * @n;
  .sm(margin-left, ~"calc(@{val} + var(--offset_one_side))");
  .sm(margin-right, ~"calc(@{val} + var(--offset_one_side))");
}

.shift-sm-left(@n){
  @val: 100% / @columns * @n;
  .sm(margin-left, ~"calc(@{val} + var(--offset_one_side))");
}

.shift-sm-right(@n){
  @val: 100% / @columns * @n;
  .sm(margin-right, ~"calc(@{val} + var(--offset_one_side))");
}

.shift-sm-padding(@n){
  @val: 100% / @columns * @n;
  .sm(padding-left, ~"calc(@{val} + var(--offset_one_side))");
  .sm(padding-right, ~"calc(@{val} + var(--offset_one_side))");
}

.shift-sm-padding-left(@n){
  @val: 100% / @columns * @n;
  .sm(padding-left, ~"calc(@{val} + var(--offset_one_side))");
}

.shift-sm-padding-right(@n){
  @val: 100% / @columns * @n;
  .sm(padding-right, ~"calc(@{val} + var(--offset_one_side))");
}

.shift-xs(@n){
  @val: 100% / @columns * @n;
  .xs(margin-left, ~"calc(@{val} + var(--offset_one_side))");
  .xs(margin-right, ~"calc(@{val} + var(--offset_one_side))");
}

.shift-xs-left(@n){
  @val: 100% / @columns * @n;
  .xs(margin-left, ~"calc(@{val} + var(--offset_one_side))");
}

.shift-xs-right(@n){
  @val: 100% / @columns * @n;
  .xs(margin-right, ~"calc(@{val} + var(--offset_one_side))");
}

.shift-xs-padding(@n){
  @val: 100% / @columns * @n;
  .xs(padding-left, ~"calc(@{val} + var(--offset_one_side))");
  .xs(padding-right, ~"calc(@{val} + var(--offset_one_side))");
}

.shift-xs-padding-left(@n){
  @val: 100% / @columns * @n;
  .xs(padding-left, ~"calc(@{val} + var(--offset_one_side))");
}

.shift-xs-padding-right(@n){
  @val: 100% / @columns * @n;
  .xs(padding-right, ~"calc(@{val} + var(--offset_one_side))");
}

Проблема в том, что если я десктопе использую отступ и на планшете или на мобилке я не переписываю отступ, то у меня не перезатtрается offset.

Предположим offset у меня на десктопе 20px. На мобилке у меня останется так же 20 пикселей. Хотя у меня там должно быть 5px.

Для этого и предлагаю использовать css переменные