wrap a .less definiciones de CSS en un espacio de nombres

Quería utilizar Twitter bootstrap CSS solo en un elemento específico en mi página web.wrap a .less definiciones de CSS en un espacio de nombres

Intenté hacerlo como en el siguiente código. Pero después de compilar esto en un archivo CSS, no se generó nada. Si moví @import fuera de #my_div, entonces obtuve todas las definiciones css para twitter boostrap.

#my_div { 
    @import "../twitter_bootstrap/lib/bootstrap.less"; 
}

Como puedo namespace un archivo less css?

Fuente

2011-11-27 Martins Balodis

LESS la documentación tiene una sección sobre namespaces.

Por lo que podría definir su lib en un documento separado:

#ns { 
    .twitter() { 
    // Instructions to be used later 
    // Nothing will appear in compiled CSS except if called later (because of parenthesis) 
    } 
}

importar este archivo al principio del archivo CSS para ser compilado y el uso de estas instrucciones:

#my_div { 
    #ns > .twitter; 
}

Fuente

2011-11-27 19:51:38 FelipeAls

El problema es con '@ import'. No funciona cuando se usa en un espacio de nombres. –

@MartinsBalodis El código para lib debe ser un archivo LESS (simplemente agregue '#ns {.anything() {' al principio y dos '}' al final de su lib de CSS. Y el archivo principal también debe ser un LESS La importación debe tener lugar al principio fuera de '#my_div {}'. No se enviará nada del primer archivo sin instrucciones adicionales, por lo que puede importarlo en cualquier lugar antes de este selector. Luego, el '#ns> .twitter;' Finalmente, la instrucción agregará su código justo donde lo desee. – FelipeAls

The twitter lib solo se puede importar. No puedo editar esos archivos. Se usan como submódulo de git. [Archivo principal de Twitter. archivo .less] (https://github.com /twitter/bootstrap/blob/master/lib/bootstrap.less) –

Ésta es la forma en Lo he hecho. Esto tiene lugar en la raíz de la carpeta de arranque que se descarga o clona desde git.

## ./less/namespace.css (New file) 

#ns { 
    .twitter() { 
    @import "less/bootstrap.less"; 
    } 
} 

## ./style.less 

@import "less/namespace.less"; 

.namespace { 
    #ns > .twitter; 
}

A continuación, ejecute menos style.less> style.css

Fuente

2012-05-17 12:32:07 Randy

¿Qué hay en el archivo less/namespace.less? – FLX

Intenté esto, pero no puedo usar mixins importados de .twitter() – FLX

Esto no funciona, terminas con selectores como: button.namespace .close {...} – Caqu

No estoy usando less en el sitio vivo, ni estoy haciendo manualmente la compilación por lo que esta es una especie de versión "simple". No es tan automático como los demás, pero puede aplicarse a algunos usuarios.

Editar bootstrap.css/bootstrap-responsive.css

.tb { 
    // copy/paste the entire bootstrap.css 
}

recompilación con menos o utilizar un compilador menos en línea - http://winless.org/online-less-compiler
Editar el archivo compilado ahora-y cambiar body {} declaraciones CSS para tb {}.
Utilice el nuevo archivo CSS.
Coloque el contenido de "bootstrap" dentro de un <div class='tb'></div>

Fuente

2012-06-10 18:26:36 Nucleon

¿Cómo evitaría esto colisiones en html? , por ejemplo:

¿Cuando otra biblioteca tiene una definición de clase de 'botón grande'? La prefijación es la única manera de evitar colisiones de espacio de nombres en ambos extremos. – TaylorMac

Anteriormente había intentado usar todos los archivos .less en el código fuente y volver a compilar sin Winless. Sin embargo, faltaba algo en el archivo CSS final. Pude corregirlo siguiendo su procedimiento, ¡gracias! –

Esto funcionó para mí. Seguí las instrucciones en "Instalación de Grunt" en getbootstrap.com/getting-started. Una vez que estaba funcionando, seguí esta respuesta, volviendo a compilar con 'grunt dist'. De esta manera, mantengo los prefijos de proveedores de CSS. –

Aquí es cómo lo hice, basado en github tenedor de majgis arriba:

de arranque-ns.less:

@import "namespace.less" 
.bs { 
    #ns > .twitter; 
    }

namespace.less:

#ns { 
    .twitter(){ 
    @import "bootstrap.less"; 
    } 
}

Luego hace referencia a bootstrap-ns.less en su página html. Esto fue probado con dotLESS.

Fuente

2013-02-12 03:43:51 muzzamo

si tiene control sobre los parámetros de compilación simplemente establezca strictImports en falso y trabaje como pensaba para que todo esté bien. considere mirar less-strictimports o en este issue.

Fuente

2014-08-09 09:35:23

wrap a .less definiciones de CSS en un espacio de nombres

Respuesta

Cuestiones relacionadas