2012-02-22 16 views
8

me gustaría para almacenar el valor actual de una propiedad para su uso posterior. Ya se ha resuelto para jQuery.Cómo obtener el valor de una propiedad CSS en SASS?

La cuestión es que estoy usando un @mixin aplicar un hack CSS en varios lugares (Justified Block List) y me gustaría restaurar la propiedad font-size en .block-list * (actualmente todo texto en sub-elementos se acaba de derrumbarse)

soluciones no son satisfactorios:

  • guardar el tamaño global de la fuente por defecto en un archivo separado y lo pasan a la @mixin en @import. Esto, por supuesto, en el caso general no es el mismo tamaño de fuente que los objetos a los que se aplica la mezcla.
  • guardar el tamaño de fuente cada vez que cambie ella, pasa eso. Este enreda los archivos involucrados, ya que no es muy elegante a @include la hoja de estilo de la tipografía en varios archivos de otro modo no relacionado.
  • uso más jQuery.

soluciones satisfactorias: Posiblemente

  • Sustituir el tamaño de la fuente con una regla más fuerte en el primer antepasado, que lo cambia. Esto podría ser difícil de determinar.

Respuesta

3

No hay manera de indicar calculado valor de una propiedad hasta que los estilos se apliquen realmente a un documento (eso es lo que jQuery examina). En los lenguajes de hojas de estilo, no hay un valor "actual" excepto el valor inicial o el valor que especifique.

Guardar el tamaño de fuente cada vez que lo cambie, y pasar que parece mejor, y @BeauSmith ha dado a good example. Esta variante permite pasar de un tamaño o de repliegue a una global definida:

=block-list($font-size: $base-font-size) 
    font-size: 0 
    > li 
    font-size: $font-size 
3

Si tiene un mixin que está haciendo algo "hacky" con el tamaño de fuente, entonces probablemente deba restablecer el tamaño de fuente como lo habrá notado. Sugiero lo siguiente:

  1. Cree un Sass parcial para registrar las variables de configuración de sus proyectos. Sugiero _config.sass.
  2. definir su base de tamaño de fuente en _config.sass:

    $base-font-size: 16px 
    
  3. Añadir @import _config.sass en la parte superior de su archivo principal Sass (s).

  4. actualización del mixin para restablecer el tamaño de fuente a su base de $-font-size:

    @mixin foo 
        nav 
        font-size: 0 // this is the hacky part 
        > li 
         font-size: $base-font-size // reset font-size 
    

Nota: Si está utilizando la sintaxis SCSS, necesitará para actualizar los ejemplos aquí.

Cuestiones relacionadas