ejemplos - ¿Qué significa! Default en un valor de propiedad css?

selectores css3

Question

El código de arranque de twitter tiene muchas propiedades CSS con un !default . Al final.

P.ej

p {
  color: white !default;
}

¿Qué hace !default ?

ACTUALIZAR

Mi mal por no ser claro. Estoy usando el puerto SASS de Bootstrap.

Answer 1

Twitter Bootstrap usa LESS por lo que he visto. Por otro lado !default es realmente parte de Sass , y se usa para dar valores predeterminados de las variables Sass ( $var ), lo que lo invalidaría en su contexto dado, incluso en Sass .

Además, no he podido encontrar ninguna referencia a !default en la documentación LESS , y que yo sepa es exclusiva de Sass. ¿Estás seguro de que encontraste esto en la fuente de Bootstrap y no en otra parte? Porque, sinceramente, no recuerdo haber visto el código Sass / SCSS en las hojas de estilo de Bootstrap.

Por lo que vale, ¡el único token válido que comienza ! en CSS es !important , de lo que ya puede estar al tanto .

Answer 2

! default se usa a menudo en Bootstrap Sass. Es similar a un reverso! Importante. Todas las variables Bootstraps se configuran con! Predeterminado para permitir al desarrollador personalizar aún más el bootstrap. Con! Default sass solo definirá una variable si aún no se ha establecido.

Esto permite una mayor flexibilidad.

//Example1 Dress color = red
$auroras-dress-color: blue;
$auroras-dress-color: red;

//Example2 Dress color = red
$auroras-dress-color: blue !default;
$auroras-dress-color: red;

//Example3 Dress color = blue
$auroras-dress-color: blue;
$auroras-dress-color: red !default;

¿Entonces, por qué es importante? Bootstrap es un paquete. La mayoría de las personas no editan la fuente de Bootstrap. NUNCA ACTUALICE LA FUENTE BOOTSTRAP. Para personalizar bootstrap, agregará su propio archivo variable y lo compilará con el código de arranque, pero nunca toque el paquete de arranque nativo. La página de Bootstrap sass tiene toda la información sobre cómo personalizarla y compilarla en la documentación.

No sé por qué menos no hace esto. No he trabajado mucho con menos y no sé si tiene su propia gestión integrada de variables.

Ejemplo de violín https://jsfiddle.net/siggysid/344dnnwz/