If you still don’t know what exactly is Sass, here is its official site
It’s been some time already since I’ve been introduced to Sass, Though I normally use just Scss syntax. Sass’s really nice additional tool and these tips are what I found myself comfortable with and tend to convince people around me to use.
1.Structure is important
Since I’m mostly using Rails, sometimes people tend to use Rails’s default structure of stylesheet files base on controllers which is not wrong but I think it’s less useful than it should be.
But it’s not reusable and just think about when this project grow up to 20+ controllers and 50+ pages is enough to makes me feels dizzy.
My approach is to divide Sass files into modules and widgets based on how it’s used.
2.Keep variables together
A nice feature of Sass that every beginner would know about is how Sass cleverly handle values in form of variables. But to put it all over every files is not practical since I will have troubles finding them in later stage of development. So, this approach is simple, just try to lump it together as much as I can. In my most cases, one file is enought.
3.Order import statements
Another features of Sass that’s widely known, @import. This may sound insignificant at first but to not carefully ordering import statements can prove to be troubled later and it will also provide more readablity to our stylesheets. So, it’s a win in every way.
4.Loop and Conditions are handy.
A nice Sass playground here
It’s similar to every programming languages you’ve used so far but it actually in stylesheet files. Learn to use it and you’ll never want to go back to plain css again.
Here’s an example.
5.Use @include, @extend wisely
I found this a lot in past year. When people know how to use @mixin, they failed to notice how large their compiled CSS has become. Sometimes it’s not really an issue since I can have almost or perhaps the same results when I use only @include with @mixin. But my compiled CSS file is not nearly the same though.
Let try something to see it in action,
Use @include to include @mixin properties
Use @extend to extend properties
Both compiled CSS give us 26 and 19 lines with the same results on browser. There’s still differrences in size though it’s not much to the point that it doesn’t matter but it’s still our choices to choose which approach to do it.In this case, I choose latter choice to save some spaces for compiled css, more reasonable to me.