Having a size undependand on the root node's font-size

[kilobyte2007]

#So I am working on a project which will be embedded in other sites (a browser extension can be an example but it's a bit different), where I wouldn't want to alter the global CSS. So this would mean that all my Keen-UI components will have different sizes based on where do I embed the script. If some site has the HTML font size to 100% and the other to 90% then I'll have components of inconsistent sizes.

I've tried many things but as for now the only working solution for me is to alter the sass rem() function in my fork and returning the sizes in "px" directly.

Is there another solution someone used without having to maintain my own fork?
Could we maybe make this configurable, say have a sass variable that would allow configuring that?

For example:
variables.scss

$sizing-strategy: 'rem' !default; // can be 'px' or 'rem'

util.scss

// Converts one or more pixel values based on selected sizing strategy.
@function get-size($values, $base: null) {
    $unit-values: ();
    $count: length($values);

    // If no base is defined, defer to the global font size
    @if $base == null {
        $base: $base-font-size;
    }

    // If the base font size is a %, then multiply it by 16px
    // This is because 100% font size = 16px in most all browsers
    @if unit($base) == '%' {
        $base: ($base / 100%) * 16px;
    }

    // Using rem as base allows correct scaling
    @if unit($base) == 'rem' {
        $base: strip-unit($base) * 16px;
    }

    @if $count == 1 {
        @return to-unit($values, $base);
    }

    @for $i from 1 through $count {
        $unit-values: append($rem-values, to-unit(nth($values, $i), $base));
    }

    @return $unit-values;
}

@function to-unit($value, $base: null) {
    @if $sizing-strategy == 'px' {
        @return $value;
    }

    @return to-rem($value, $base);
}

I renamed the rem function to get-size because it's not always returning rem anymore (so we'd have to replace this everywhere too). What do you think of such a solution and would you accept such a PR for it?

[JosephusPaye]

It might be possible to override the rem() function locally.

So Keen UI's definition of rem() could be wrapped in a check for whether the function already exists, before defining it.

@unless function-exists(rem) {
    @function rem(...) {
		// ...
	}
}

Then you'd implement your own custom rem() that's added before Keen UI.

A more generic name like size() in that case would be more appropriate, as it's short and not rem-specific. However I'm afraid we'll have to keep the name for now, since changing it will be a breaking change.

The ideal solution in this case is probably CSS variables, which can be overridden in specific subtrees in a document. It's something I'm looking into for the next major version of Keen UI.

[kilobyte2007]

Using @unless seems like a fair solution for the time being.

[kilobyte2007]

I've just tried implementing this and apparently, you cannot declare a function inside conditional blocks is SASS :-(