importar arquivo .css para o arquivo .less

228

Você pode importar arquivos .css para arquivos .less ...?

Estou familiarizado com menos e o uso para todo o meu desenvolvimento. Eu uso regularmente uma estrutura da seguinte maneira:

@import "normalize";

//styles here

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

Todas as importações são outros arquivos .less e funcionam como deveriam.

Meu problema atual é o seguinte: desejo importar um arquivo .css para .less que faça referência aos estilos usados ​​no arquivo .css da seguinte maneira:

@import "../style.css";

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

O arquivo .css contém uma classe chamada .type mas quando tento compilar o arquivo .less, recebo o erroNameError: .type is undefined

O arquivo .less não importará arquivos .css, apenas outros .less ...? Ou estou referenciando errado ...?!

Jonny Wood
fonte
5
MENOS cai de volta para CSS, então você deve ser capaz de apenas style.css renomeação para style.less, em seguida, importá-lo como de costume ... a menos que naturalmente renomeando style.css não é uma opção
jackwanders
3
Sim, infelizmente, renomear o arquivo .css não é realmente possível.
Jonny Wood
1
Tem o mesmo problema. Por favor, ajude
Yaroslav
5
se você não precisar fazer referência ao .css externamente e, ao mesmo tempo, não modificar (renomear) o arquivo .css, poderá criar um link simbólico para ele com a .lessextensão. Em seguida, referencie-o como um .lessarquivo. Sendo um link simbólico, elimina a carga para sincronizá-los, pois as alterações .css afetam imediatamente o arquivo .less sendo importado. A desvantagem é que você deve recompilar o css final após as alterações subseqüentes. Para informações sobre como criar links simbólicos no Windows, digite MKLINK /?em uma janela de comando
Ivaylo Slavov
@jackwanders, renomear não é necessário, pois LESS volta ao CSS (como você indica corretamente). Você pode importar o .cssarquivo usando a linha (less)directiva e tirar proveito do fato de que .cssa sintaxe é um válido .lesssintaxe
ira

Respostas:

316

Você pode forçar um arquivo a ser interpretado como um tipo específico especificando uma opção, por exemplo:

@import (css) "lib";

irá produzir

@import "lib";

e

@import (less) "lib.css";

importará o lib.cssarquivo e o tratará como menos. Se você especificar um arquivo como menor e não incluir uma extensão, nenhum será adicionado.

Fractalf
fonte
1
Essa é a resposta correta. O terceiro importará + compilará o código CSS como menos código e não deixará a diretiva intacta.
CMCDragonkai
1
Eu acho que @import (include) "lib.css" deve ser usado. Não gosto da semântica de mentir para o compilador. Certamente quando você sabe que não há nenhum código MENOS no arquivo.
16
Isto irá criar uma http-request adicional para foo.css, então a (inline)directiva (ver stackoverflow.com/a/22594082/160968 ) agora é preferível
Urs
1
(inline)não funcionará porque não transforma referências externas a fontes ou outros @importarquivos CSS editados. Você simplesmente acabar com um arquivo css maior que causa lotes de 404 solicitações HTTP ....
user3338098
Revertendo a última edição, uma vez que era simplesmente incorreto e não responder à Q.
sete fases-max
246

Se você deseja que seu CSS seja copiado na saída sem ser processado, use a (inline)diretiva . por exemplo,

@import (inline) '../timepicker/jquery.ui.timepicker.css';
mpen
fonte
7
Perfeito. Isso funciona bem quando você deseja concaturar alguns arquivos CSS (por exemplo, em um ie7.less), mas não necessariamente processá-los (por exemplo, o bootstrap-ie7 usa expressões que o LESS não lida bem).
31514 Joe
4
Muito útil. @import (css) "styles.css";não funcionou para mim.
ivkremer
10
Ambos abordam casos de uso diferentes. Com (css), a @importdiretiva permanecerá como está e, como resultado, o arquivo CSS será carregado pelo navegador em tempo de execução; com (inline), o conteúdo do arquivo CSS é realmente importado para a folha de estilo compilada, que é o que você deseja se esse arquivo estiver fora da raiz da web, por exemplo. Note-se que o comportamento padrão quando @importing um .cssarquivo é o mesmo que com o (css)flag - leia os documentos para obter mais informações :)
neemzy
então isso obviamente não funcionará se o seu arquivo css tiver @importdiretivas, pois isso exigiria "processamento".
user3338098
'Inline' significa que todas as suas importações também serão inline? Existe uma maneira de recursivamente inline?
Streetlight
29

Eu tive que usar o seguinte na versão 1.7.4

@import (less) "foo.css"

Eu sei que a resposta aceita é, @import (css) "foo.css"mas não funcionou. Se você deseja reutilizar sua classe css no seu novo arquivo menor, é necessário usar(less) e não (css).

Verifique a documentação .

Gudradain
fonte
2
A resposta aceita teve a opção correta inicialmente (sim, (less)é a única opção se você deseja reutilizar alguns estilos de um arquivo css), mas por alguma razão o @Fractalf removeu a parte correta com sua edição mais recente.
seven-phase-max
1
Você pode combinar "referência" e "menos":@import (less, reference) "foo.css"
Skarllot
28

Mude a extensão do arquivo css para .less. Você não precisa escrever MENOS nele; todo o CSS é MENOS válido (exceto os itens de MS dos quais você precisa escapar, mas isso é outro problema.)

Pela resposta da Fractalf, isso está corrigido na v1.4.0

Mathletics
fonte
4
Tecnicamente, isso não está importando um arquivo CSS.
Nilskp
@nilskp você está correto; mas se você quiser usar as classes em outro arquivo, precisará de um arquivo MENOS, não CSS.
Mathletics
1
@nilskp você está dizendo que alterar a extensão é pedir demais para que o arquivo seja analisado como MENOS?
Mathletics
23
Sim, claro que é. Tente pensar fora de algum pequeno projeto doméstico, onde você possui todos os arquivos. Pense em projetos maiores e com várias pessoas, onde nem todo mundo está usando o LESS. Existem muitos casos de uso em que a alteração de nomes de arquivos não é possível.
nilskp 26/07/12
1
Você deve se preocupar se o seu css contém algo como: calc (100% - 45px); e você quer isso no navegador. Se menos processar o arquivo como menos, a saída final será: calc (55%); porque menos o calc.
Christof Aenderl
8

No site da LESS :

Se você deseja importar um arquivo CSS e não deseja que LESS o processe, basta usar a extensão .css:

@import "lib.css"; A diretiva será deixada como está e terminará na saída CSS.

Como o jitbit aponta nos comentários abaixo, isso é realmente útil apenas para fins de desenvolvimento, pois você não gostaria de ter um @importconsumo desnecessário de largura de banda preciosa.

webdevkit
fonte
14
Isso não importará o arquivo, mas deixará a diretiva @import intacta. Ainda funcionará, mas você deve evitar o css-import - veja isto developers.google.com/speed/docs/best-practices/…
Alex
5
Obrigado pela informação @jitbit. Pessoalmente, acho mais fácil usar @importdurante o desenvolvimento e, em seguida, combine e reduza os arquivos importados em uma única folha de estilo ao passar para a produção.
Webdevkit
1
Se você ler a pergunta com atenção (e não apenas a linha do cabeçalho), verá que o OP deseja referenciar uma classe no arquivo css como um mixin, o que não é possível se for analisado apenas como uma simples importação de css.
temor
7

Tente o seguinte:

@import "lib.css";

Da documentação oficial:

Você pode importar arquivos css e menos. Somente menos instruções de importação de arquivos são processadas, as instruções de importação de arquivo css são mantidas como estão. Se você deseja importar um arquivo CSS e não quer que o LESS o processe, use a extensão .css:


Fonte: http://lesscss.org/

Dr.Kameleon
fonte
2
Se você ler a pergunta com atenção (e não apenas a linha do cabeçalho), verá que o OP deseja referenciar uma classe no arquivo css como um mixin, o que não é possível se for analisado apenas como uma simples importação de css.
temor
6

Se você apenas deseja importar um arquivo CSS como referência (por exemplo, para usar as classes no Mixins), mas não incluir o arquivo CSS inteiro no resultado, você pode usar@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;
}

* Resultado (my.css) com lessc my.less out/my.css*

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

estou a usar lessc 2.5.3

hinneLinks
fonte
Era disso que eu precisava. No entanto, eu tive que usar a sintaxe estender: &:extend(.reference-class all);. Fazer referência direta à classe resultou em um erro de compilação.
Jens Neubauer
4

Se você deseja importar um arquivo css que deve ser pisado com menos frequência, use esta linha:

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

desde a versão 1.5.0, você pode usar a palavra-chave 'inline'.

Exemplo: @import (inline) "not-less-compatible.css";

Você o usará quando um arquivo CSS não for menos compatível; Isso ocorre porque, embora o Less suporte a maioria dos padrões conhecidos de CSS, ele não suporta comentários em alguns lugares e não suporta todos os hacks de CSS conhecidos sem modificar o CSS. Portanto, você pode usar isso para incluir o arquivo na saída, para que todo o CSS esteja em um arquivo.

(fonte: http://lesscss.org/features/#import-directives-feature )

Pieter-Jan
fonte