variables - rails - Variación de la variable Bootstrap con LESS

rails bootstrap>- sass

Question

He estado investigando durante todo el día, ya que consideré que valdría la pena dedicar algún tiempo a aprender las mejores prácticas para personalizar Bootstrap .

Veo que hay una página amigable disponible para personalizar elementos selectivamente de http://twitter.github.io/bootstrap/customize.html pero quiero tener más control que esto sin tocar los archivos originales de arranque.

Para empezar, básicamente quería probar cambiando la grilla de 12 a 16 columnas y para hacer esto, creé mi propio archivo variable menos y agregué @gridColumns: 16; solo a este archivo e importó esta costumbre menos dentro de bootstrap.less de la siguiente manera.

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";
**@import "../custom-variables.less"; //Override variables**

Luego, al usar WinLess , compilé el archivo bootstrap.less para obtener el nuevo bootstrap.css con la llamada importada de importación invalidada y vinculé el css con el archivo html pero la grilla no cambiará a 16 columnas.

¿Alguien puede señalar lo que estoy haciendo mal?

Answer 1

Otro ejemplo que puede ayudar a alguien:

@import ''bootstrap/bootstrap/variables'';
// Prgress bar
@progress-bar-bg: #f5f5f5;
@progress-bar-default-color: @gray-base;
@import ''bootstrap/bootstrap'';

Answer 2

Sobrescribir las variables después de importar el bootstrap.less original funciona muy bien para mí:

@import "less/bootstrap.less";
@body-bg: red;
@text-color: green;
@link-color: blue;

La compilación de la fuente LESS anterior proporciona un código CSS de Bootstrap personalizado.

Información relevante: http://lesscss.org/features/#variables-feature-lazy-loading

Answer 3

Trabajo en un proyecto similar donde tenemos bootstrap en una ubicación de "terceros" y luego reemplazamos solo mixins.less y variables.less . El patrón que usamos para esto agrega tres archivos y no toca nada en absoluto (lo que le permite reemplazar fácilmente):

/style
|- bootstrap-master/
| |- less/
| |- js/
| ...
|- shared/
|- shared.less
|- variables.less
|- mixins.less

el archivo mixins

/*
* /style/shared/mixins.less
*/
@import "../bootstrap-master/less/mixins.less";
// override any mixins (or add any of your third party mixins here)

el archivo de variables, que es donde anularías las cuadrículas

/*
* /style/shared/variables.less
*/
@import "../bootstrap-master/less/variables.less";
@gridColumns: 16; // let''s pretend this is your site-specific override

El archivo que realmente se importa (o se envía a un compilador menos):

/*
* /style/shared/shared.less
*/
@import "variables.less";
@import "mixins.less";
@import "../bootstrap-master/less/grid.less";
//and any other bootstrap less files we need here

en mi configuración, si hago esto, obtengo un archivo css con algunos valores .span15 extraños (ya que no actualicé @gridColumnWidth o @gridGutterWidth pero los valores de .row-fluid en realidad funcionan de la manera que esperaría a desde que se calculan por división directa).

Me gusta esta configuración porque puedo cd en bootstrap-master y git pull y obtener nuevas actualizaciones sin tener que combinar ninguno de mis kludges específicos (también me da una buena idea de lo que en realidad he anulado)

La otra cosa es que está muy claro que shared.less solo está usando grid.less (en lugar de todo el bootstrap). Esto es intencional ya que en la mayoría de los casos no necesita todo el arranque, solo unas pocas partes para comenzar. La mayoría de los archivos de arranque menos al menos son agradables, ya que sus únicas dependencias difíciles son shared.less y mixins.less

si esto todavía no funciona, entonces tal vez WinLess se está confundiendo

Answer 4

Una manera fácil es simplemente anular los estilos en su documento de estilo, usar el mismo nombre y marcarlo como importante.