Use Sass @each instead of @for for columns

[matthewmcclatchie]

Apologies if this is in the wrong place. Not an issue as much as question / suggestion.

How can we reproduce this bug?

Just by building an email using the framework.

What did you expect to happen?

Compiled and Inlined CSS to only contain column classes that I've used in building an email.

What happened instead?

I still get all of the other column widths and offsets in my compiled and inlined styles.

What email clients does this happen in?

All.

To elaborate slightly:

If I've only used large-10 and large-12 columns for example, I still get all of the other column widths and offsets in my compiled and inlined styles. It'd make sense if there was an easy way to exclude the columns and offsets that I don't want.

I've commented out the really useful stuff that I haven't used in a particular email build in the foundation-emails.scss' file in the node_modules directory, but was thinking it'd be handy to have access to all this stuff in thesrc` sass directory.

When I came to commenting out the column classes I'm not using, I discovered the @for loop used to generate them. This is great, but I found that I was ending up with a lot of redundant styles in my inlined code, so I commented out the @for loop and added an @each loop, like so:

$cols-used: 1 10 12;

@each $column in $cols-used {
   //stuff from inside the @for
}

I just needed to replace the $i used in the @for loop declaration with $columns where I'd changed it, but I suppose I could have left that.

The result is a smaller CSS file, which by itself isn't that big of a deal given that everything is inlined, but when you apply this to the scss/components/media-query.scss file on the small columns, the size of the overall .html files in the dist directory also goes down. The savings are in the small kbs range, but every little helps!

I appreciate implementing something like the @each could be tricky, since you'd need to define and maintain an array of the columns you've used as you go, but it's simple enough.

Also, making the foundation-emails.scss' and it's component files more easily accessible, i.e., in thesrc` directory, would make it easier to remove the parts of Foundation that aren't relevant to a particular email.

I'm not sure if the savings would be as significant as they were for me if I had used a lot more of the available column styles, but in my case, just commenting out some stuff and making one small change saved me some bytes. 😄

[tdhartwick]

Very cool @matthewmcclatchie! This is the correct place to file this 😄 . I'm a fan of reducing file size and unnecessary code, so using @each seems like it might be worth a look! Will plan on looking into. In the meantime, any chance you might be able to whip up a PR?

[matthewmcclatchie]

Sure! I'll get on it 😄 👍

[DanielRuf]

Any update on this?

In general we use uncss to remove unused classes and css so this should not be needed in theory.