2012-05-17 21 views
45

El código de arranque de twitter tiene muchas propiedades de CSS con un !default al final.¿Qué significa! Default en un valor de propiedad css?

E.g.

p { 
    color: white !default; 
} 

¿Qué significa !default do?

ACTUALIZACIÓN

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

+0

No presente en css 2.1 http://www.w3.org/TR/CSS2/ – Marcin

+1

nunca visto antes. podría ser algo que solo se aplica a bootstrap, quizás tienen algún tipo de análisis que busca – Huangism

Respuesta

31

Twitter Bootstrap usa LESS por lo que he visto. Por otro lado, !default is actually part of Sass, y se usa para dar valores por defecto a 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 the LESS documentation, 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 con ! en CSS es !important, which you may already be aware of.

+1

OK, acabo de descargar y copiar una nueva copia de Bootstrap, y de hecho, esto es decididamente * no * de la fuente de Bootstrap ... – BoltClock

+1

Podría estar equivocado, o podría estar usando un [puerto Sass de Bootstrap] (https://github.com/jlong/sass-twitter-bootstrap). De cualquier forma, hizo una pregunta poco clara. – thirtydot

+0

@thirtydot: Interesante, no estaba al tanto de tal puerto. Sin embargo, el código proporcionado anteriormente aún no es válido para Sass, y ni siquiera necesito grep el puerto Sass para saberlo. – BoltClock

21

! Predeterminado 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; 

¿Por qué es esto 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 violín https://jsfiddle.net/siggysid/344dnnwz/

Cuestiones relacionadas