How to get the value of a CSS property in SASS?

Question

I'd like to store the current value of a property for later use. It's already been solved for jQuery.

The issue is that I'm using a @mixin to apply a CSS hack in several places (Justified Block List) and I'd like to restore the font-size property in .block-list * (currently all text in sub-elements is just collapsed).

Unsatisfactory workarounds:

• Save the global default font size in a separate file and pass it to the @mixin on @import. This is of course in the general case not the same font size as the objects which the mixin is applied to.
• Save the font size whenever you change it, and pass that. This tangles up the files involved, since it's not very elegant to @include the typography stylesheet in several otherwise unrelated files.
• Use more jQuery.

Possibly satisfactory workarounds:

• Override the font size with a stronger rule on the first ancestor which changes it. This could be tricky to determine.

Answer 1

If you have a mixin which is doing something "hacky" with the font size, then you will probably need to reset the font size as you have noticed. I suggest the following:

1. Create a Sass partial to record your projects config variables. I suggest _config.sass.

2. Define your base font-size in _config.sass:

   $base-font-size: 16px
   

3. Add @import _config.sass at the top of your main sass file(s).

4. Update the mixin to reset the font-size to your $base-font-size:

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

Note: If you are using the SCSS syntax, you'll need to update the examples here.

Answer 2

There's no way to tell the computed value of a property until the styles are actually applied to a document (that's what jQuery examines). In the stylesheet languages, there's no "current" value except the initial value or the value you specify.

Save the font size whenever you change it, and pass that seems best, and @BeauSmith has given a good example. This variant lets you pass a size or fallback to a defined global:

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