Add function that just returns the calc() value for a specific property

[benjaminpreiss]

When using a separate file for variables in a project it would be very useful to have a function in rfs, that only returns the calc() value for a specific property.

E.g. instead of using the mixin @include font-size(30px) I would like to do the following:

vars.scss:

$font-size-1: new-rfs-font-size-function(30px);

file1.scss

@import './vars.scss'

.someClass {
   font-size: $font-size-1;
}

That would really help sometimes, when it comes to elements with position: fixed and margins set with rfs.

[MartijnCuppens]

What output would you expect here?

[benjaminpreiss]

to resulting css should be:

.someClass {
     font-size: calc( ... rem + ... vw);
}

where the calc(...) would normally be the value generated by the rfs font-size() mixin.

I forgot, that I would like to add a parameter to the function specifying which property I want the value for. E.g.

new-rfs-size-function(30px, 'font-size');

[MartijnCuppens]

Is rfs-fluid-value() the function you're looking for?

https://github.com/twbs/rfs/blob/master/scss.scss#L185

$font-size-1: rfs-fluid-value(30px);

.someClass {
   font-size: $font-size-1;
}

[benjaminpreiss]

Almost... I would love to have a solution which also considers max-media-query.

so something like that:

@function rfs-calculated-value($values, $property: font-size) {
  @if $values != null {
    $val: rfs-value($values);
    $fluidVal: rfs-fluid-value($values);
    $result: '';

    // Do not print the media query if responsive & non-responsive values are the same
    @if $val == $fluidVal {
      $result: $val;
    }
    @else {
      $result: if($rfs-mode == max-media-query, $val, $fluidVal);
    }
  }

  @return $val;
}

[benjaminpreiss]

Oh, so I just realized that the plans from issue #110 would definitely help me...

Idea

But I have another idea. One could define a custom rfs mixin, which takes a $value... argument list like so:

@mixin rfs-custom($property, $value...) {
    ...
}

Then one could add together the calculated rfs-values for each value and assign the result to the property.

An example:

vars.scss

$font-size-1: 12px;
$font-size-2: 30px;
$font-size-3: 50px;
// font-size-4 should add up font-size-1, font-size-2 and font-size-3 in rfs.
$font-size-4: $font-size-1, $font-size-2, $font-size-3;

some-file.scss

.someClass1 {
  @include font-size($font-size-1);
}
.someClass2 {
  @include font-size($font-size-2);
}
.someClass3 {
  @include font-size($font-size-3);
}
.someClass4 {
  @include rfs-custom('font-size', $font-size-4...);
}

rfs.scss

@mixin rfs-custom($property: font-size, $values...) {
  $val: '';
  $fluidVal: '';
  @if $values != null {
    @for $i from 0 to length($values) {
      $val: $val + rfs-value(nth($values, $i));
      $fluidVal: $val + rfs-fluid-value(nth($values, $i));
    }

    // Do not print the media query if responsive & non-responsive values are the same
    @if $val == $fluidVal {
      #{$property}: $val;
    }
    @else {
      @include _rfs-rule {
        #{$property}: if($rfs-mode == max-media-query, $val, $fluidVal);

        // Include safari iframe resize fix if needed
        min-width: if($rfs-safari-iframe-resize-bug-fix, (0 * 1vw), null);
      }

      @include _rfs-media-query-rule {
        #{$property}: if($rfs-mode == max-media-query, $fluidVal, $val);
      }
    }
  }
}

Expected result:

some-file.css

.someClass1 {
  font-size: 1.25rem;
}
.someClass2 {
  font-size: calc(2rem + 0.9vw);
}
@media (max-width: 1200px) {
  .someClass2 {
    font-size: 4rem;  
  }
}
.someClass3 {
  font-size: calc(3rem + 1.6vw);
}
@media (max-width: 1200px) {
  .someClass3 {
    font-size: 6rem;
  }
}
.someClass4 {
  font-size: calc(5rem + 2.5vw);
}
@media (max-width: 1200px) {
  .someClass4 {
    font-size: 10rem;  
  }
}

[MartijnCuppens]

You could just do this:

$font-size-1: 12px;
$font-size-2: 30px;
$font-size-3: 50px;
$font-size-4: $font-size-1 + $font-size-2 + $font-size-3;

.someClass4 {
  @include font-size($font-size-4);
}

[benjaminpreiss]

yes, I could... But it would not return the sum of values that rfs calculated for font-size-1 to font-size-3... because @include font-size(12px) is probably below base-value.

Maybe I have to clarify what I want...
Imagine a header with position fixed and bottom and top margin set with rfs. Now I want to fill the rest of the screen with a fixed div, whose top margin should equal the total height of the header.

This would be achievable by creating three variables for header height, top and bottom margin. The fourth variable would be for my div top margin, the sum of the three header variables.

[MartijnCuppens]

Imagine a header with position fixed and bottom and top margin set with rfs. Now I want to fill the rest of the screen with a fixed div, whose top margin should equal the total height of the header.

I personally use position: sticky in that case.