Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sass rendering size units with space before them #29

Open
rhumbus opened this issue Sep 17, 2014 · 10 comments
Open

Sass rendering size units with space before them #29

rhumbus opened this issue Sep 17, 2014 · 10 comments

Comments

@rhumbus
Copy link

rhumbus commented Sep 17, 2014

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; }
.
.
.
@grayghostvisuals
Copy link
Contributor

@rhumbus
A couple questions as I'm not seeing this issue compiling with Ruby in Typeplate v1.1.4.

  1. What are you using to compile Sass? (libsass, ruby etc)
  2. What version of Typeplate are you using? (we currently are serving 1.1.4)

@grayghostvisuals
Copy link
Contributor

@rhumbus
This is actually a duplicate issue to #23. Seems to be a libsass compile error that has also been reported to libsass with no response in many, many days from them.

@rhumbus
Copy link
Author

rhumbus commented Sep 18, 2014

Thanks for the checkup.
Will follow that issue thread.

I saw that you opened an issue with libsass. So just in case it helps, I use:

  1. Typeplate 1.1.14
  2. gulp-sass 0.7.3
  3. node-sass 0.9.3
  4. libsass 1.3.14

Just to say, I love Typeplate. It has become the only css framework I ever start a project with - it doesn't dictate design patterns, yet brings the subliminal magic needed for harmony.
Good work.

@ramsaylanier
Copy link

Has there been any resolution to this? I'm having the same issue.

@KittyGiraudel
Copy link

Do you have a SassMeister reproducing the issue?

@sdras
Copy link

sdras commented Jul 16, 2015

Anyone know if there is any progress on this one? Trying to write a for loop and the seconds are separated from the integers

@sdras
Copy link

sdras commented Jul 16, 2015

As soon as I wrote that, I found the answer, posting here for others: #{$i+1}s

@grayghostvisuals
Copy link
Contributor

@artemist Yeah, it's a crazy bug in LibSass. The issue had a bounty then was closed. It's a tough thread to follow so let me know what's up :) Thanks for leaving your fix too 👍

@grayghostvisuals
Copy link
Contributor

I'm just gonna change this to the line Sarah wrote above and be done with it. Re-opening the issue as a reminder.

@tobyStaff
Copy link

Advice on here was helpful to me also. I had a function like this, which previously worked;
@function valueUnits($number, $units) { @return #{$number}$units; }
I changed the #{$number}$units; to be #{$number}#{$units}; And it worked.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants