Меньше css избегать глобализованной переменной

Я ищу лучший способ избежать глобальных диффузных переменных.

Я сделал тест с этой конфигурацией:

_import.less

@test: #FFF;

_import2.less

@test: #000;

без теста

@import (reference) "_import";

body {
    background: @test;
}

test2.less

@import (reference) "_import2";

div {
    background: @test;
}

без индекса

@import "test";
@import "test2";

Вывод с lessc index.less test.css по-прежнему выглядит как

body {
  background: #000;
}
div {
  background: #000;
}

Но то, что я ищу, это:

body {
  background: #FFF;
}
div {
  background: #000;
}

Использование менее 2,7 или 3,9 дает такое же поведение.
Кто-нибудь знает решение?
Спасибо

Это предусмотрено дизайном: При двойном определении переменной используется последнее определение переменной, поиск осуществляется из текущей области видимости вверх.ссылка Если вы хотите избежать этого, используйте другую переменную или динамически импортируйте файлы (в зависимости от условия)

— 21.02.2019 16:46

css less

21.02.2019 16:37

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы всегда можете изолировать область чего-либо (включая импортированный файл), используя «безымянное пространство имен», то есть & {}, блокировать.

Например.:

без теста:

@import "_import";

body {
    background: @test;
}

test2.less:

@import "_import2";

div {
    background: @test;
}

без индекса:

& {@import "test";}
& {@import "test2";}

В зависимости от ваших целей эти & {} блоки можно переместить прямо в сами test файлы.

---

Ссылка: Область действия локальных переменных в файлах импорта

это интересно. не знал об этом. Что может быть примером веской причины для использования этого? Я считаю, что ОП даже не выиграет, потому что зачем вообще его импортировать, если вы собираетесь его расширить?

— 22.02.2019 03:46

@soulshined Я предполагаю, что типичным вариантом использования является объединение несвязанных библиотек/компонентов (с использованием одинаковых имен переменных) в одну. И/или что-то вроде это.

— 22.02.2019 04:01

Просто спасибо, это круто. Doc должен быть улучшен, потому что нет возможности легко найти

— 22.02.2019 18:12

21.02.2019 19:35