jamonserrano / plumber-sass Goto Github PK

Hi there,

Thanks for taking the time to create this awesome plugin - I'm just wondering if you've got any real-world examples to share, specifically with complicated web apps with lots of component?

I'm thinking of using this for a betting application and would be interested to see how it works at scale.

Thanks again!

Hi there,

I'm unable to download webfonts from Typekit/Fonts.com. Any advice on how to calculate baseline ratio with lesser-known typefaces?

Thanks!

Hey.
Thank you for building this project.
I have used sassline before.
Right now i am trying to implement your tool in a real life project.

The font i want to use is called Lelo

I got the following information from the Typedesigner:
Ascender: 1032
Descender: -328
Caps height: 648
x height: 468
1000 Units pro EM

So if i want to do the math.
(UnitsPerEm − hhea.Ascender − hhea.Descender) / (2 × UnitsPerEm)

[1000 - 1032 - (-328)] / [2 x 1000]
[1000 - 1360] / [2 x 1000]
-360 / 2000
= -0.18

Using the measure tool i get a value of 0.268

Maybe you can point me to a solution. Thank you!

Hello

I apologise in advance for my lack of knowledge. I wanted to know if it was possible for my website which has been setup using .sass preprocesser to use Plumber? I ask as Plumber is available as a '.scss' or 'post-css', but I could not see a '.sass' version. Thank you

I'm not allowed to have a line-height of 1.5 😢

it'd be great to see this as a postcss plugin in addition to an scss mixin as many folks have begun to migrate from sass to postcss

Hello jamonserrano!

I've been using plumber for a while now using both grunt (node-sass, older version) and gulp (gulp-sass). In my current project I'm using strictly npm scripts to build my front-end layer and I'm having trouble with plumber causing node-sass to crash when compiling.

The first to issues was regarding variables. I had to move line 97 and 98 to be above line 96 eding up with this order

$line-height: $line-height * $grid-height;
$baseline-from-bottom: ($line-height - $font-size) / 2 + ($font-size * $baseline);
$corrected-baseline: round($baseline-from-bottom);
$baseline-difference: $corrected-baseline - $baseline-from-bottom;
`

But I also get a more serious error on line 115 and 117 saying

"message": "0.943remrem isn't a valid CSS value.",
"formatted": "Error: 0.23575remrem isn't a valid CSS value.\n on line 106 of src/vendor/baseline/plumber.scss\n from line 13 of src/app.scss\n>> \t\t$padding-top: - $baseline-difference * $grid-height;\n\n ----------------^\n"

That's referring to these two lines of code

$padding-top: (1 - $baseline-difference) * $grid-height;
$padding-bottom: $baseline-difference * $grid-height;

It seems like $grid-height is only getting the unit "rem" but without a value.

Have you seen this error before? Not sure how to proceed to fix it.

Thanks in advance!