susyone looking for mixing "rem" #256

Closed
DicksB opened this Issue Sep 1, 2016 · 5 comments

Projects

None yet

3 participants

@DicksB
DicksB commented Sep 1, 2016 edited

I'm not certain if this is because I'm not installing mixins correctly (I tried running bundle install within the project directory, and that seemed to work OK), or because Scout doesn't include this mixin, but susyone is complaining thusly:

no mixin named rem

Backtrace:
bower_components/susy/sass/susy/language/susyone/_grid.scss:49, in mixin `set-container-width`
bower_components/susy/sass/susy/language/susyone/_grid.scss:71, in mixin `apply-container`
bower_components/susy/sass/susy/language/susyone/_grid.scss:95, in mixin `container`
../../../../../Users/redacted/Sites/devdesktop/moweb-dev/docroot/sites/all/themes/state/blue/sass/panels/layouts/panes_8_c/panes-8-c.layout.sass:12
_grid.scss
48:       } @else {
49:         @include rem(max-width, $width);
50:       }
/Applications/Scout-App.app/Contents/Resources/app.nw/bower_components/susy/sass/susy/language/susyone/_grid.scss

Anything that can be done? Is it something I can fix in my local environment? Thanks!

@TheJaredWilcurt
Member

I searched for @mixin rem and @import rem:

rem

This seems to be an issue with susyone calling for a mixin that was never defined.

su, susy, and susyone are all included mixin libraries in Scout-App 2. So if you do import "susyone"; it will likely pull from the built in version. If however, you point directly to your own version like import "../../bower_components/susy/sass/_susyone.scss"; (or whatever your relative path would be) it should use your version and not the built in one that comes with Scout-App. If your version has some Ruby magic in it that fixes this bug then it should work. Other wise you should file an issue with their repo.

Since Scout-App 2 is built with Node and Node-Sass, we don't use any Ruby/Ruby Gem stuff. So if Susy's mixin library requires Ruby to work, they will either need to update their library to be more agnostic (a demand I wouldn't make of them), or I can remove it from the built in supported mixin libraries so Scout-App users do not get confused.


@mirisuzanne can you shed some light on this. Sorry I am not very familiar with Susy and it's history.

This is an issue filed in the Scout-App repo. Scout-App is a cross-platform desktop application for processing Sass. It comes with Susy (and many other mixin libraries) built in.

PS. I'm only two spots behind you on TrendingDevs, (high five!)

@mirisuzanne

The rem mixin comes from the Compass library, which is required by SusyOne. If you import the compass library, it will work as expected. The latest Susy syntax does not require Compass, but will use the rem function if one is provided.

(TrendingDevs? I had never seen it before. What a weird ranking. High-Five!)

@TheJaredWilcurt
Member

@DicksB

Alright, so I found a solution!

You'll need to use this mixin library:

Then in your code, it works like this:

// If you set body { font-size: 100% } then use $rem-baseline: 16px;
// If you set body { font-size: 62.5% } then use $rem-baseline: 10px;
$rem-baseline: 16px;
@import "rem";

body {
    font-size: 100%;
}

h1 {
  @include rem(width, 100px);
  @include rem(font-size, 20px);
  background: #F00;
}

You can test it here:


Thanks @mirisuzanne. Yeah, it's not a very accurate site, we should be up much higher on that list :P


@DicksB

The rem mixin library I referenced will be added to the next version of Scout-App. Closing this issue. I will notify you when the next version is released.

@DicksB
DicksB commented Sep 2, 2016

Thanks very much! I'll experiment with this.

@TheJaredWilcurt
Member

@DicksB @mirisuzanne

There is a new release of Scout-App available for download.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment