Определение селекторов для применения к другим стилям

Question

Я довольно новичок в Меньше.

Существует некоторый динамический контент, поступающий из внешнего источника, который является частью тега #left (id selector).

Вот мой Less файл:

//can i define anything like this in `less` 
@not-empty: #left:not(:empty); 

#left { 
    background-color: red; 
    &:not(:empty) { 
     font-size: 20px; 
     background-color: green; 
    } 
} 

#right { 
background-color: blue; 
    font-size: 15px; 
    #left:not(:empty) { 
    font-size: 23px; 
    } 
} 

Мой ожидаемый результат будет, как если #left не пусто применять font-size: 23px. Если нет, то размер #right будет 15px.

Я использую версию версии V2.5.0 of Less. Кто-нибудь может мне с этим помочь?

Answer 1

Ответьте на вопрос, который может быть у вас меньше: Да, это возможно в Менее. Вы можете назначить свой селектор переменной, а затем использовать его через selector interpolation. Ниже приведен пример:

#left{ 
    background-color: red; 
    &:not(:empty){ 
     font-size: 20px; 
     background-color: green; 
    } 
} 

#right{ 
    font-size: 15px; 
    @{left-empty} + &{ /* will form #left:not(:empty) + #right */ 
     font-size: 23px; 
    } 

    /* You can use the adjacent sibling selector (+) or the general sibling selector (~) depending on your HTML structure */ 
    @{left-empty} ~ &{ /* will form #left:not(:empty) ~ #right */ 
     color: red; 
    } 
} 

@left-empty: e("#left:not(:empty)"); /* e() strips out the quotes */ 

Как упомянуто семь фаз-макс в комментариях, если вы ожидаете @not-empty: #left:not(:empty); оценить в булево истинным или ложным, и использовать его как if состоянии, то она не будет с Меньше. Меньше не знает содержимое вашего HTML-файла.

---

Обратите внимание, что для скомпилированного CSS на самом деле работает, ваши HTML структура должна быть правильной. В CSS вы можете стиль один элемент, основанный на другой, только если какой-либо из следующих условий матча:

1. Элемент, стилизовать (#right) является ребенок или ребенок внучатая опорного элемента (#left). Я постановляю этот случай, потому что, если это действительно ребенок, то #left автоматически не пуст.
2. Элемент, который должен быть стилизован (#right), является прямым/непосредственным ближайшим родственником ссылочного элемента (#left). Если да, используйте селектор +.
3. Элемент, который должен быть стилизован (#right), является родственным (немедленным рядом или нет) ссылочного элемента (#left). Если да, используйте селектор ~.

Если это не так, то вы не сможете достичь требуемой настройки, используя только CSS. Для этого потребуется JavaScript или любая другая библиотека.

Ниже приведен фрагмент демонстрации о том, как работают селекторы, основанные на разметке.

#left { 
 
    background-color: red; 
 
} 
 
#left:not(:empty) { 
 
    font-size: 20px; 
 
    background-color: green; 
 
} 
 
#right { 
 
    font-size: 15px; 
 
} 
 
#left:not(:empty) + #right { 
 
    font-size: 23px; 
 
} 
 
#left:not(:empty) ~ #right { 
 
    color: red; 
 
}

<div id="left"> <!-- This is not empty --> 
 
    <div id="right">Some text</div> 
 
</div> 
 
<div id="right">Some text</div> <!-- This is the immediate next sibling and a general sibling of the first #left--> 
 

 
<hr> 
 

 
<div id="left">Some other text</div> <!-- This is also not empty --> 
 
<div id="right">Some text</div> <!-- This is the immediate next sibling for the second #left and is a general sibling of the first #left --> 
 

 
<hr> 
 

 
<div id="left"></div> <!-- This is empty --> 
 
<div id="right">Some text</div> <!-- This is the immediate next sibling for the third #left and is a general sibling of the first and second #left -->