2012-09-27 11 views
7

Digamos que tengo un estilo definido usando Menos:Reutilización de estilos anidados MENOS

ul.unstyled, 
ol.unstyled { 
    margin-left: 0; 
    list-style: none; 
} 

Más adelante, quiero volver a utilizar la clase unstyled:

.my-list { 
    .unstyled; 
} 

Esto no funciona , sin embargo, y no puedo entender la magia para que funcione. ¿Alguna idea?

Respuesta

5

No se pueden reutilizar definiciones de clases arbitrarias, solo mixins (aquellas que comienzan con un punto). En este caso, deberá duplicarlo.

+2

¿implica esto que LESS crea una mezcla sin parámetros cuando defines '.myClass'? –

+0

Buena pregunta. Creo que sí, porque según la documentación, mixins son solo clases: "Mixins le permite incorporar todas las propiedades de una clase en otra clase simplemente incluyendo el nombre de clase como una de sus propiedades. Es como variables, pero para clases enteras ". –

3

Prueba esto:

.unstyled { 
    margin-left: 0; 
    list-style: none; 
} 

.my-list { 
    .unstyled; 
} 

Usted no será capaz de nido .unstyled si se define como ul.unstled y ol.unstyled.

+0

Eso no funciona para mí porque no poseo la definición original ... en otras palabras, la clase 'unstyled' se define en' Bootstrap.less' y me gustaría evitar modificar la dependencia. En cambio, quiero saber cómo reutilizar un estilo anidado. –

+0

Ah. Si no puede/no puede anular esos estilos, no estoy seguro de que pueda reutilizarlo de la manera que desee. LESS no le permite especificar '' ul.unstyled'' o similar como una clase anidada. Siempre puedes crear un mixin, pero eso sería duplicar el código. –

1

Puesto que no se puede volver a utilizar .unstyled cuando es un estilo anidado y es probable que no desea editar el código fuente de Bootstrap, sugeriría que acaba de asignar nombres de las clases tanto a su lista:

<ul class="unstyled my-list" />