Less

[GeSTaM]

Столкнулся с такой проблемой есть div в нем лежит span с display: none; когда div становится :hover - span становится display: block;

В css все просто:

div:hover > span {display: block !important;}

но к сожалению в LESS символ > используется с другой целью.

Кто ни будь знает решение проблемы? Как на less сделать что бы при наведение на 1 объект другой менял свои свойства?

[Justnewone]

назначаем уникальный класс и пишем

div:hover .classname {display: block !important;}

[GeSTaM]

назначаем уникальный класс и пишем

div:hover .classname {display: block !important;}

не, такой вариант не работает...

[Justnewone]

Такой вариант не работает ТОЛЬКО в IE6 и ниже, но его вроде уже не модно поддерживать (тем не менее, лечица костылем JS). Во всех остальных браузерах будет работать на ура. Дайте ссылку.

[GeSTaM]

Такой вариант не работает ТОЛЬКО в IE6 и ниже, но его вроде уже не модно поддерживать (тем не менее, лечица костылем JS). Во всех остальных браузерах будет работать на ура. Дайте ссылку.

Через css работает все. Но у меня less, пишу вот так:

#karma{
   .pluse{display: none;}
   &:hover .pluse{display: block;}
}

html такой:

<div id="karma">
   <span class="pluse">+</span>
</div>

и не работает...

[Justnewone]

Less Это вот это?

http://lesscss.org/

Или вот это?

http://ru.wikipedia.org/wiki/Less

Если первое, то какой вывод в результате имеем в финальном CSS?

но в любом случе, правильней наверное так?

#karma{
   .pluse{display: none;}
   &:hover{
      .pluse{display: block;}
   }
}

[GeSTaM]

Less Это вот это?

http://lesscss.org/

Или вот это?

http://ru.wikipedia.org/wiki/Less

Если первое, то какой вывод в результате имеем в финальном CSS?

но в любом случе, правильней наверное так?

#karma{
   .pluse{display: none;}
   &:hover{
      .pluse{display: block;}
   }
}

Вот это http://lesscss.org/

Да код вы написали правильно, но так он тоже не работает...

Уже перепробовал много вариантов и что то ни как...

[Justnewone]

Далее ничем не смогу помочь, про эту технологию узнал только что.

а все-таки, как компилируется цсс в первом и во втором вариантах?

[GeSTaM]

Далее ничем не смогу помочь, про эту технологию узнал только что.

а все-таки, как компилируется цсс в первом и во втором вариантах?

1 вариант:

Less

#karma{
   span{display: none;}
   &:hover span{display: block;}
}

CSS

#karma span{display: none;}
#karma:hover span{display: block;}

2 Вариант

Less

#karma{
   span{display: none;}
   &:hover {
      span{display: block;}
   }
}

CSS

#karma span{display: none;}
#karma:hover span{display: block;}

То есть и так и так итог 1, который если писать css работает, а с less нет =(

[Justnewone]

странно, этот код все равно отдается браузеру, в результате? По крайне мере браузеру на PC? Браузеры смартфонов и терминалов не отрабатывают ховер.

Браузеру пофик из лесс это пришло, или просто нативно написано. Если есть правильный код - он его отработает. Может опечатки какие?

[GeSTaM]

странно, этот код все равно отдается браузеру, в результате? По крайне мере браузеру на PC? Браузеры смартфонов и терминалов не отрабатывают ховер.

Браузеру пофик из лесс это пришло, или просто нативно написано. Если есть правильный код - он его отработает. Может опечатки какие?

очень странно, сейчас долго матерился когда заметил что только в FF не работает... google, safari и тд все норм...

[Justnewone]

а консоль ченеть говорит?

[GeSTaM]

Все норм =)

Пару дней разбирался проблемы и не было оказывается, просто какие то плагины FF мешали, а делаю изначально все под ним =)

[paska]

че-то я не понял в чем польза от использования этого компилятора css?

[GeSTaM]

че-то я не понял в чем польза от использования этого компилятора css?

переменные

(к примеру создал @color1; и используешь его ко всем ссылкам с действием, захотел поменять цвет этих ссылок меняешь не все 200 вариантов а 1 переменную)

также вложенность очень удобно и меньше кода получается

[Justnewone]

ну, при грамотной организации кода этот вариант как бе не в первую очередь актуален. Скорее, лесс немного экономит время.