loop - sass css

El error de nombre de variable "no está definido" aunque se haya importado "variables.less"

Question

Empecé a usar LESS hoy. Pero es un poco raro. Este código no funciona. Me sale un error:

! Variable Name Error: @linkColor in a is undefined.

Mi arranque:

@import "variables.less";
@import "normalize.less";

variables.less:

@linkColor:             #08c;
@linkColorHover:        darken(@linkColor, 15%);

normalize.less:

a {
    color: @linkColor;
}
a:visited {
    color: @linkColor;
}
a:hover {
    color: @linkColorHover;
}

Cuando hago un

@import "variables.less"

en el archivo normalize.less, todo funciona bien.

Gracias por tu ayuda :)

Answer 1

Creo que es por qué maestro menos archivo está compilando. Igualmente

Si tiene Less / Project_name / project.less y en este project.less, importe menos la variable y todos los demás archivos que tenga en el directorio.

Solo tiene que compilar project.less en su css, no todos los archivos menos. Si intenta compilar project.less y variables.less a la vez, tendrá este error. Y puede evitar la declaración redundante de importar la variable menos archivos

Answer 2

Encontré el mismo problema al usar el compilador Winless.

Algunos de los archivos .less que estaba importando en master.less estaban vacíos. cuando los eliminé de la lista de archivos importados mis variables fueron reconocidas!

Answer 3

Este error también puede ocurrir a través de malas importaciones en los archivos que está importando.

También me encontré con este problema, al usar varias capas de importación, y el compilador ''lessc'' de Node.js:

• El archivo original importó un archivo (que llamaremos ''hijo'')
• El archivo secundario importó un archivo (que llamaremos ''nieto'')
• El nieto fue importado

Intenté compilar el archivo original y recibí el mismo comportamiento de ''variable indefinida''. Pude ver que la variable estaba definida en el niño y la sintaxis parecía correcta.

No se mostraron errores previos.

El problema fue que el niño no estaba importando al nieto correctamente. Es decir,

@import grandchild.less

más bien que:

@import "grandchild.less";

La reparación del hijo que importaba al nieto hizo que el original viera las variables definidas en el niño.

Esto parece un error en menos, es decir, la mala importación debería aparecer en la salida ''lessc'', por lo que un día probablemente será arreglado. Hasta entonces, espero que esto ayude.

Answer 4

Otra situación extrañamente específica en la que ocurre esto: si está usando .NET y sin punto, el compilador ahogará las consultas de medios anidados con especificadores de variables. Si tienes un código como este:

@media (min-width: @aVariable) {
    .some-class{
        margin: 10px;

        @media (min-width: @anotherVariable) {
            margin: 20px;
        }
}

... luego dotless le dirá que no puede encontrar la definición para @anotherVariable, incluso si se usa tres líneas arriba.

Answer 5

Para ayudar a cualquier otro que se encuentre con esto, no quiere duplicar CSS generado a partir de importaciones múltiples, tiene dos opciones.

1. O bien @ importe una vez las variables / archivos mixins que necesita en cada archivo que necesita para usarlos.

   Use @import-once "filename.less"; para evitar duplicados.

2. Actualice a LESS> 1.4.0 cuando llegue; Desde el menos sitio web:

   "The statement @import acts differently before and after 1.4.0. It acts as @import-multiple in all older versions and as @import-once in all less.js versions after 1.4.0."

Answer 6

Para mí sucedió cuando usé @ Importar una vez y nada me ayudó. pero con @Import funcionó.

como lo leí en la última versión de Less the Import, funcionará como Importar una vez.

Answer 7

Puede haber otra posible causa raíz.

Aquí está mi Gruntfile.js original:

less: {
      compile: {
        files: {
          ''css/less.css'': ''less/**/*.less''
        }
      }
    },

El comodín hace que el compilador LESS compile todos los archivos .less debajo de esa carpeta y combine todos los resultados en un CSS. Y obtuve errores corriendo grunt less:compile :

NameError: .transition no está definido en less / core / html.less en la línea 38, columna 3

Una vez que cambié ''less/**/*.less'' ''less/css.less'' a ''less/css.less'' , la compilación tiene éxito.

Answer 8

También puede obtener este error si está intentando importar el archivo dos veces (no es una buena idea) y la primera importación es antes de que se hayan cargado las variables a las que se hace referencia en su archivo.less

Nota: estoy usando la compresa django

en index.html tuve:

{% compress css %}
<link href="{{ STATIC_URL }}less/timepicker.less" rel="stylesheet" type="text/less">
<link href="{{ STATIC_URL }}less/style.less" rel="stylesheet" type="text/less">
{% endcompress %}

luego en styles.less tuve

...
@import "timepick.less";

Answer 9

Yo usaría las reglas anidadas en el archivo normalize.less:

a {
     color: @linkColor;

     &:visited {color: @linkColor;}

     &:hover {color: @linkColorHover;}
}

Y en @import, no necesitas usar ".less", es opcional:

@import "variables";
@import "normalize";

No sé si esto puede ayudar ...

Answer 10

Esta otra pregunta finalmente me condujo a la respuesta correcta.

Parece que el compilador LESS está fallando silenciosamente si los archivos están codificados con una lista de materiales. (Es una marca de orden de bytes para aquellos que no están familiarizados con el término). Esta es la configuración predeterminada en algunos editores, como Visual Studio.

El compilador muestra un error en la lista de materiales si está en su archivo raíz, pero parece fallar silenciosamente para los archivos @ import-ed.

Intente guardar sus archivos como UTF-8 sin una lista de materiales, y vea si eso resuelve su problema.