Как подключить less?

Question

[mihaevs]

че за проблемы,подключаю Less, в firefoxe норм все,а в других куча ошибок

Answer 1

[Юлия YuKi]

Как уже выше написали - подключать к живому сайту непосредственно less нехорошо по разным объективным причинам - начиная с того, что это замедляет неслабо рендеринг обычно, если заставлять компиляцию срабатывать таким образом на клиенте, поэтому как вам тут выше отписались обычно препроцессинг используют только на девелоперском, но никак не на живом окружении. То есть вы пишите less файл, берете компилятор, который превратит у вас же на машине это в обычный css, то бишь скомпилирует (посмотрите на SimpLess: wearekiss.com/simpless, к примеру, если не хотите или не умеете пользоваться Gulp/Grunt) и вот этот скомпилированный css вы выгружаете на сервер и подключаете к сайту. Технология работы такая - правки все делаете в less файлах, после правок всегда компилите в css тем или иным образом и выкладываете.
Не знаю как объяснить понятнее, потому что выше уже все написали. :)

Comments

[mihaevs]

спасибо,все подробно расписали)

Answer 2

[Евгений Комаров]

Не надо так.... Подключайте CSS. Пишите *.less файлы и компилируйте их в готовый css, который подом и уйдет на страницу. Для автоматической компиляции используйте gulp/grunt, потому как тыкаться в консоль очень быстро надоедает.

Comments

[mihaevs]

разве CSS поддерживает структуру Less,вложения всякие

[Евгений Комаров]

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

.btn {
   border: 1px solid transparent;
   text-align: center;
   color: #fff;
   background-color: #ff0;
   &.next {
      background-color: #f0f;
   }
}

будет при компиляции переведено в

.btn {
   border: 1px solid transparent;
   text-align: center;
   color: #fff;
   background-color: #ff0;
}
.btn.next {
   border: 1px solid transparent;
   text-align: center;
   color: #fff;
   background-color: #f0f;
}

полистайте документацию, все это подробно расписано

[Евгений Комаров]

препроцессоры для того и создали, чтобы не дублировать себя и писать меньше кода