Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

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

Tim Knight , if you have time, would you give me your opinion on this take please? And I'm also using a helpers mixins, like:

//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 :

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.

1 Answer

Tim Knight
Tim Knight
28,888 Points

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:

  1. 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.
  2. 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. 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 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.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Oh no, I'm open to everyone :D It's just so far no one replies , and the other things I don't really know how does even specialize in this, because most people from what I see do back-end, and when they write their answer, it's not that is bad... but it's not you know, many people don't even know what are CSS methologies like BEM, OOCSS etc.. : p and Sass too. So I always think about you when it comes to CSS.

I'm just using only the grid system, nothing else, I have learned a lot from getting their code, in terms of learning, as I'm re-verse engineering it, and improve the work I do, and I really like it. I have learned a lot from it so far. THe grid stuff I took from boostrap, and modified and added few parts or mixins that are based on boostrap, but I could make a bootstrap like grid system now as well if I was to take time but I super like the work I'm doing now and I'm a bit in it right now so I'd use the bootstrap-ish grid on the current project I suppose. https://github.com/AurelianSpodarec/hclovetocode/tree/master/assets/scss

I got that to 18 instead of 12 collumns. It's exactly the same layout as when I handcoded everything on my own :) meaning I think I can customize boostrap grid system to a degree lol

I'm actually not sure how that works, umm, if you look at my cache CSS ther, it rendered all of the grid system - like 800lines of code! of just grid system there.

My plan is to make YT tutorials re-veerse enginering bootstrp code as well, to learn it better, and hopefully help others to understand it too. Though Id be doing stuff that I feel it's missing or it's hard to find on the web, without going to many places. But that shoudn't be illegal right, boostrap is open source and many people do tutorials how to use it, so getting the code exposed and study it and putting it on yt shoun't be the problem right : d because anyone can do it anywas.

Yes, you recommened me neat grid system. I just tried to do something on my own :D But I will use that for sure in my next project, 100% I will.

Or maybe I did it the wrong way with mixins?

You said if i abstract it into mixins, it will take only what i use, then I must done it wrong.

However, I'm using a lot more mixins now, and a bit more logic, and better structuring, I'd soon get all of this :D the way i want :D

Meanwhile I'm learning PHP.

Tim Knight
Tim Knight
28,888 Points

Looking at your output it's doesn't seem all that off to me. Yeah, it's a lot there because you have all of the grid offsets and all of the grid pushes. You don't however need a push of 0 or an offset of 0 though. But those are tiny and it's not that big of a deal that they're in there. If you compressed your CSS output (which you can change in Sass) you only have an 18k CSS file with all of your stuff in it, it's not bad at all.

I can definitely understand the desire to do something on your own. Just keep in mind that when you're first getting started, using other people's stuff can help you understand how they solved the problem too. It can give you more idea for when you develop something on your own.

It's really the Bootstrap system mixin's that are generating your grid CSS so all of that CSS is going to be written, just like how Bootstrap does it. This does require class-based grid columns just like Bootstrap. This is why I think investigating Neat would be helpful for you because their methodology is far more inline with what you want than Bootstrap's.

Good luck, and you're doing great.