Skip to content

Sass rendering size units with space before them #29

@rhumbus

Description

@rhumbus

Sass (scss here) is adding a space between calculated values and units, which makes them dismissed by the browser.
For instance, the Type-scale mixin:

@if $value == rem {
        font-size: $scale#{px};
        font-size: context-calc($scale, $base, $value);
    } @else if $value == em {
        font-size: context-calc($scale, $base, $value);
    } @else {
        font-size: $scale#{px};
    }

    @if $measure != "" {
        @if $value == rem {
            margin-bottom: measure-margin($scale, $measure, $value: px);
            margin-bottom: measure-margin($scale, $measure, $value);
        } @else if $value == em {
            margin-bottom: measure-margin($scale, $measure, $value: em);
        } @else {
            margin-bottom: measure-margin($scale, $measure, $value);
        }
    }

Compiles to (notice the units are separated from their values):

.alpha, h1 {
  font-size: 60 px;
  font-size: 3.33333 rem;
  margin-bottom: 8.91 px;
  margin-bottom: 0.495 rem; }

.beta, h2 {
  font-size: 48 px;
  font-size: 2.66667 rem;
  margin-bottom: 11.1375 px;
  margin-bottom: 0.61875 rem; }

.gamma, h3 {
  font-size: 36 px;
  font-size: 2 rem;
  margin-bottom: 14.85 px;
  margin-bottom: 0.825 rem; }
.
.
.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions