I was always thinking that building grid systems in CSS (or SASS for that matter) is an undertaking only for the finest ones. Perhaps I’m a bit naive, but I think I just built a simple one of my own. So I would seeks advice from the elders and ask you, is this a good starting point?
I know I’m far from using the full potential of SASS, and for now I’m only using some variables, but my main concerns are to make sure this does not break in older browsers. Later on, as I learn SASS, I plan to generate the columns automatically and add more variables.
The Sass (note, it’s Sass, not SASS), looks fairly basic so I wouldn’t worry about it breaking in most browsers. I notice you are using font-size:0; to kill the white space nodes that come with inline elements; I’d ask that you check Safari Mac since I’ve ran into a few issues with that (I’ve found 0.1px font size works, but “0” doesn’t.) Just give that a whirl.
Overall, it’s a good starting point, but ultimately I ask that for everyones sake, don’t make another grid system unless it’s PURELY for practice and you don’t intend to release it.There are so many out there in the ecosystem, that it’s doubtful yours would make any true contribution (please don’t take offense to that.)
Thanks @RyanReese. Yes it’s only for my own practice. I’ll make sure to check the font-size tip you suggested me. As an alternative, I’ll see how the grid would work based on flexbox.