2016-11-25 2 views
0

У меня есть следующие CSS:Правильный способ перевести этот CSS на МЕНЬШЕ?

.map{ 
    position: absolute; 
    top: 0%; 
    bottom: 0%; 
    left: 50%; 
} 

.map.zoom { 
    top: -106px; 
    overflow: visible; 
} 

Теперь я хочу добавить это МЕНЬШЕ таблицы стилей, но я не уверен, что правильный способ сделать это, то, как справиться с тем, что второй стиль для элементов, которые имеют оба класса (map и zoom).

Очевидно, я мог бы просто добавить их отдельно, но я чувствую, что должен быть способ вставить второй внутри первого или иначе связать их, поскольку они разделяют класс map.

+0

Возможный дубликат [Применить стиль к дочерним элементам с МЕНЬШЕ] (http://stackoverflow.com/questions/20223307/apply-style-to-child-elements-with -less) – abhirathore2006

+0

No @ abhirathore2006. Это не дочерний элемент. – Harry

+2

Вы можете просто положить '& .zoom' в качестве селектора внутри правила' .map', а затем записать свойства под ним. Я уверен, что это должно быть обманом (поскольку это одна из основных концепций «Меньше» и, наверняка, была задана раньше), но не того, что было приведено выше. – Harry

ответ

2

Чтобы перевести это значение в LESS, вы можете сделать следующее.

.map{ 
    position: absolute; 
    top: 0%; 
    bottom: 0%; 
    left: 50%; 
    &.zoom{ 
    top: -106px; 
    overflow: visible; 
    } 
} 

В «&» -знак ссылки на родительский элемент, так что вы будете захватить родительский селектор и добавить класс .zoom к нему.

Основано на example on the LESS documentation.

+0

Или это http://lesscss.org/features/#parent-selectors-feature – sniels

Смежные вопросы