How do I make Sass to generate only what I want in the moment?

Question

@Tim Knight (https://teamtreehouse.com/timjknight) , if you have time, would you give me your opinion on this take please? And I'm also using a helpers mixins, like:
```css
//Box Sizing Prefixes
@mixin box-sizing($boxmodel) {
  -webkit-box-sizing: $boxmodel;
     -moz-box-sizing: $boxmodel;
          box-sizing: $boxmodel;
}
//Font
@mixin font-face($family, $path, $weight: normal, $style: normal) {
  @font-face {
      font: {
        family: $family;
        style: $style;
        weight: $weight; 
      }
      src: url("/fonts/#{$path}.woff") format("woff"); 
  } 
}
```
My CSS is looking way more Sassy that way! I have more but that's just for a show :D Sass is very big lol Once mastered HTML/CSS and Sass, id be able to do this with ease , any layout anything, the fundamental part :D having a solid skill, using BEM, Atom whatever :D It's just , this is exciting. I see it comming. I just need to push my self more, so finally I pushed my self to re-verse enginering bootstrap so slowly I'm learning about it :D 
So, I'm making my own site, with my own code, but I stole bootstrap grid system ( I hope it's legal lol - eventually i'd learn how to make my own bootstrap like grid system with Sass) and what I'm doing, is I'm focusing on writing semantic HTML, so :
```css
section {
    @include make-row();
    article { 
        @include make-xs-column(12);
        @include make-sm-column(12);
        @include make-md-column(6);
        @include make-lg-column(6);
    }
}
```
And I absolutelly love this idea. Is absolutelly amazing. I preffer this than include row col-xs1 etc.. in HTML , this makes HTML soo clean and easy to understand for anyone, it's beatufiul... ack to the point. 
The grid system, generated all of the thousands or hundred of lines of code ! 
How can I make it so it generates the code that I only use? So say i include smcolumn 5, it will generate that, but if I don't use 1,2,3,4,6,7,8,9, it won't generate it, because it's just a waste of file space.
Or you're syaing that few hundred lines, as I will make this grid system to 16, not 12, will not matter? Because heck, i just started to project and it's already 1k lines lol 
and the include columns(6) - that's good right? Because if we think about it, we would use the same class in the HTML so we would repeat it, so if we include it, it will still repeat so the performance won't be hurt riht. If imy logic goes along with how the reality works.

Tim Knight · Accepted Answer

Hi Aurelian, 
Well there's a few things here, so I'll try to answer what I can. I would invite you too to be open to other people on the forums since just getting my thoughts won't give you the full potential of the community.
So a few things:
Remember that when you're using mixins that Sass will only render the mixins that you actually use. So technically if you're abstracting your grid system into mixins, it's only going to render what you use.
If you're just using the bootstrap system and you're concerned that there's a ton of other CSS in there that you don't actually need, you'd want to investigate a post processor... something like UnCSS (https://github.com/giakki/uncss). This is more about an issue of using CSS libraries rather then just something that Sass does. Setup correctly, this will look through your HTML and find the unused classes within your CSS to compile a smaller CSS file.
I believe I recommended it to you before but if you're looking for mixin abstractions, you might want to investigate the Neat grid system (http://neat.bourbon.io/) over using the Bootstrap system. But yes, using the Bootstrap system for your work is fine as long as you're not trying to say it's something that you made without crediting them in the source code.

Welcome to the Treehouse Community

Looking to learn something new?

Aurelian Spodarec

Aurelian Spodarec

How do I make Sass to generate only what I want in the moment?

1 Answer

Tim Knight

Tim Knight

Aurelian Spodarec

Aurelian Spodarec

Tim Knight

Tim Knight