Compiled Sass Output Different than packaged CSS
iamra opened this issue · 9 comments
Hi,
I will ahead of time apologize if this question is very beginner.
I am just learning how to use sass in my development workflow.
When I compile the sass files, the generated css file is a few hundred lines smaller than the packaged css, resulting in a very different stylesheet.
I am not changing any of the bundled files, simply running sass styles.scss styles.css
Am I missing a step that I should be taking? is there a missing dependency or configuration to use the sass files and generate an output similar to the precompiled typeplate.css file?
Thank you for any assistance on this.
Best regards.
Hi @ramielbarsoum,
The compiled Sass will be compressed so it will look much different than the standard CSS file provided which is uncompressed(not minified). You can change the output options for Sass to be minified, or not.
Hi @grayghostvisuals I am aware of compression/minification.
My output is nested / expanded.
I guess my issue is that something is causing the following output in my css:
/* line 45, _typeplate-mixins.scss */
.typl8-mega, h1 {
font-size: 72px;
font-size: 4rem;
margin-bottom: 43.63636px;
margin-bottom: 2.42424rem; }
notice how large the margin values are compared to the packaged css. Also .typl8-mega should not be mixed with h1 but rather .typl8-alpha as in the packaged css.
The posted example gives me a better clue into your issue/comment now so thanks for posting that.
This was a suggestion by @ramsaylanier way back when so maybe we can have him chime in here.
Hmmm, don't remember making this suggestion, but I'll certainly look into it.
Btw, how are you compiling your sass?
I have tested compiling through sass CLI (libsass?) ran gulp build on the development branch (which does not compile the sass files, and the generated pre-compiled typeplate.css does not have this issue), as well as using Koala app. Sass is new to me, I have usually compiled code through gulp or grunt and just relied on pre-configured work files, so if there is anything that I need to be doing differently I will gladly test.
I also tested compiling through compass with the same issue arising.
@grayghostvisuals @ramsaylanier even though the PR request removes the duplicated margin output, I am still being affected by excesivly large margin and font sizing as such:
.typl8-mega, h1
{
font-size: 4rem;
margin-bottom: 2.42424rem;
}
compared to the bundled typeplate.css values as such:
h1,
.typl8-alpha {
font-size: 60px;
font-size: 3.33333rem; /* 60 / 18 = 3.3333 */
margin-bottom: 8.91px;
margin-bottom: 0.495rem;
}
Again, this is just strictly downloading the master branch, and compiling the SCSS files. No editing has been done on these files on my part. I am simply wanting a styling output that matches the precompiled file, but something seems to not be correctly working as when I compile the scss files the formatting is different from the bundled style sheet.
@ramsaylanier #40 was the issue I was referencing.
Ah gotcha. So, my thoughts:
Yes, the compiled CSS from Sass does not match the bundled css. I'm guessing that is because the bundled css file wasn't updated after #40. With a 60px font size, the margin should be a lot larger than just 8px. If you look at the Typeplate website, the alpha class has a bottom margin of ~36px or ~2rem, which looks right.
I'm not sure why the h1 is getting the Mega class, but the sizes are being applied correctly because Mega is supposed to be 4rem. I'll check into that.