Импортировать файл.css в файл.less

Question

Можете ли вы импортировать файлы.css в файлы.less...?

Я довольно знаком с меньшим количеством и использую это для всего моего развития. Я регулярно использую структуру следующим образом:

@import "normalize";

//styles here

@import "mixins";
@import "media-queries";
@import "print";

Все импортные файлы - это другие файлы.less и все работает как надо.

Моя текущая проблема заключается в следующем: я хочу импортировать файл.css в.less, который ссылается на стили, используемые в файле.css, следующим образом:

@import "../style.css";

.small {
    font-size:60%;
    .type;
}
// other styles here

Файл.css содержит класс с именем .type но когда я пытаюсь скомпилировать файл.less, я получаю сообщение об ошибке NameError: .type is undefined

Будет ли файл.less не импортировать файлы.css, только другие файлы.less...? Или я ссылаюсь на это неправильно...?!

Answer 1

Вы можете принудительно интерпретировать файл как определенный тип, указав параметр, например:

@import (css) "lib";

будет выводить

@import "lib";

а также

@import (less) "lib.css";

импортирует lib.css подать и относиться к нему как к меньшему. Если вы укажете, что файл меньше и не содержит расширения, то он не будет добавлен.

Answer 2

Если вы хотите, чтобы ваш CSS был скопирован в вывод без обработки, вы можете использовать (inline) директива например,

@import (inline) '../timepicker/jquery.ui.timepicker.css';

Answer 3

Мне пришлось использовать следующее с версией 1.7.4

@import (less) "foo.css"

Я знаю, что принятый ответ @import (css) "foo.css" но это не сработало. Если вы хотите повторно использовать свой класс CSS в своем новом файле less, вам нужно использовать (less) и не (css),

Проверьте документацию.

Answer 4

Измените расширение вашего файла CSS на .less , Вам не нужно писать в нем МЕНЬШЕ; все CSS действительны МЕНЬШЕ (кроме тех вещей MS, от которых вы должны уйти, но это другая проблема.)

За ответ Фрактальфа это исправлено в v1.4.0

Answer 5

Попробуй это:

@import "lib.css";

Из официальной документации:

Вы можете импортировать как CSS, так и меньше файлов. Обрабатываются только меньше операторов импорта файлов, операторы импорта файлов CSS сохраняются как есть. Если вы хотите импортировать файл CSS и не хотите, чтобы LESS обрабатывал его, просто используйте расширение.css:

---

Источник: http://lesscss.org/

Answer 6

С сайта LESS:

Если вы хотите импортировать файл CSS и не хотите, чтобы LESS обрабатывал его, просто используйте расширение.css:

@import "lib.css"; Директива просто останется как есть и в итоге будет выводиться в CSS.

Как отмечает Jitbit в комментариях ниже, это действительно полезно только для целей разработки, так как вы не хотите иметь ненужные @importпотребляя драгоценную пропускную способность.

Answer 7

Если вы просто хотите импортировать CSS-файл в качестве ссылки (например, чтобы использовать классы в Mixins), но не включаете весь CSS-файл в результат, который вы можете использовать @import (less,reference) "reference.css";:

my.less

 @import (less,reference) "reference.css";
 .my-class{
     background-color:black;
     .reference-class;
     color:blue;
 }

reference.css

.reference-class{
    border: 1px solid red;
}

* Результат (my.css) с lessc my.less out/my.css *

.my-class {
  background-color: black;
  border: 1px solid red;
  color: blue;
}

я использую lessc 2.5.3

Answer 8

Если вы хотите импортировать файл css, который должен быть обработан как менее, используйте эту строку:

.ie {
  @import (less) 'ie.css';
}

Answer 9

С 1.5.0 вы можете использовать ключевое слово "inline".

Пример: @import (inline) "not-less-compatibility.css";

Вы будете использовать это, когда файл CSS может быть менее совместимым; это потому, что хотя Less поддерживает большинство известных стандартов CSS, в некоторых местах он не поддерживает комментарии и не поддерживает все известные хаки CSS без изменения CSS. Таким образом, вы можете использовать это, чтобы включить файл в вывод, чтобы все CSS были в одном файле.

(источник: http://lesscss.org/features/)