Как использовать переменные в селекторе - PullRequest
Новая
       5

Как использовать переменные в селекторе

0 голосов
/ 21 февраля 2019

С помощью .class & я могу добавить правила, добавляя родительский класс к пути, но он всегда помещает этого родителя впереди всех родителей.

Есть ли какой-нибудь способ добавить родителя в середину где-нибудь.

Я попытался использовать для него переменную следующим образом: Пример меньше: 

@color: "";
.a {
  .b @color {
    .d {
      .e {
        font-size: 2em;
        color: black;
        @color: ".yellow";
        color: yellow;
        @color: ".red";
        color: red;
        @color: "";
      }
      .f {
        font-size: 1.2em;
      }
    }
  }
}

Ожидаемый результат: 

.a .b .d .e {
  font-size: 2em;
  color: black;
}
.a .b .yellow .d .e {
  color: yellow;
}
.a .b .red .d .e {
  color: red;
}
.a .b .d .f {
  font-size: 1.2em;
}

Но это не сработало.

Итак, как мне написать что-то, что хорошо генерирует этот вывод.Я хотел бы, чтобы изменение цвета было близко к цвету по умолчанию.И я хотел бы, чтобы не было лишнего дублированного кода = не сбрасывал размер шрифта до одинакового значения для каждого цвета.

Ответы [ 2 ]

0 голосов
/ 22 февраля 2019

Вариант использования довольно близок к различным "тематическим" вопросам, таким как:

То есть существует множество возможных решений, каждое из которых имеет свои плюсы и минусы в зависимости от других деталей и целей вашего реального проекта.

---

Принимая ваш "ожидаемый результат" какесть хорошее начало - написать миксин, который обрабатывает повторяющийся код, например:

# 1 

.a .b {
    .d .e {
        font-size: 2em;
        color: black;
    }
    .-(@color) {
        .@{color} .d .e {color: @color}  
    }
    .-(red);
    .-(yellow);
    .-(green);
    // etc.
}

---

С помощью некоторого обмана и хакерства мы можем избавиться от .d .e повторений, но я сомневаюсь, что повышенная сложность и потенциальные проблемы того стоят:

# 2 

.a .b {
    .themed(~'.d .e', {
        font-size: 2em;
        color: black;
    }, {
        color: @color;
    });
}

// .....................
// generic "theme" impl.

.themed(@selector, @default, @colored) {
    .-(default);
    .-(red);
    .-(yellow);
    .-(green);

    .-(@color) {
         .@{color} @{selector}
             when (iscolor(@color)) {@colored();}
         @{selector}
             when not (iscolor(@color)) {@default();}
    }
}

---

Чтобы проиллюстрировать, что варианты возможной реализации, чтобы добраться до примера "ожидаемого результата", почти бесконечны и mОстальное зависит от того, какие функции Less вы знакомы, и какие функции вы можете / хотите / хотели бы использовать, вот немного более современный пример "Less Less" с использованием более "обычной" / "основной" логики (многие люди предпочтут использовать;REQ.Менее 3.x или выше):

# 3 

.a .b {
    .d .e {
        font-size: 2em;
        color: black;
    }
    each(red yellow green, {
        .@{value} .d .e {color: @value}
    });
}

(хотя то же самое уже было предложено в другом ответе).

---

Говоря о .color элементах в середине селектора, подумайте, действительно ли ваш HTML действительно этого требует.Т.е. вам действительно понадобятся такие сверхспецифичные селекторы, как:
.a .b .yellow .d .e,
.x .y .yellow .d .e,
.p .q .yellow .d .e,
.a .b .yellow .foo .e,
, имеющие другой цветзначения?

Разве не достаточно набора вроде .yellow .e {color: yellow} или чего-то еще?

0 голосов
/ 22 февраля 2019

Вы можете использовать переменную в качестве селектора: 

@color: .yellow;
.a {
  .b @{color} {
    ...

Но в вашем примере это не сработает, потому что переменные компилируются с момента последнего использования в цепочке (вот почему вы можете использовать переменную повторно)значение .red никогда не будет заполнять то место, где вы хотите (то же самое место, что и желтый, потому что оно находится в последней области видимости)

Вы можете сделать много вещей, чтобы обойти это, миксины, функции, включения, карты и т. д.действительно то, что соответствует вашим потребностям.Вот простой пример с универсальным циклом: 

@colors: cornflowerblue, green, red, yellow;

.a  {
  .b {
    each(@colors, {
      .@{value} .d {
        .e {
          color: @value;
        }
      }
    });
    .d .e { 
      font-size: 2em;
    }
    .d .f {
      font-size: 1.2em;
    }
  }
}

Вы можете нажать кнопку «посмотреть скомпилированную css» внизу встраивания фрагмента или посмотреть здесь 

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css" data-user="soulshined2" data-slug-hash="ErBYOY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="ErBYOY">
  <span>See the Pen <a href="https://codepen.io/soulshined2/pen/ErBYOY/">
  ErBYOY</a> by soulshined (<a href="https://codepen.io/soulshined2">@soulshined2</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
...