As soon as I knew about pre-processors, I wanted to test them so bad then I stumbled upon Sass website. Syntactically awesome they said? I totally love anything with awesome attached to it because I feel awesome.
I program in python and even though strict indentations may be a pain, that pain has become my honey. I fell in love with the indented Sass (not SASS). I love checking out Ana Tudor and Hugo Giraudel's works. A lot more awesome people like Mason Wendell who created breakpoint (a compass extension I can not do without). All these great people in the community have once used the indented Sass but now, they all write SCSS.
Breakpoint itself was written in SCSS even though I could use it in Sass
SCSS is also Sass. If that’s confusing see this article by Hugo.
One great advantage of SCSS is that it is so similar to CSS and a CSS document passes as a SCSS document but it doesn’t always work vice-versa. This makes it easy for people that are new to pre-processors to easily deal with it.If it’s so easy, why did I choose the indented style? I wouldn’t make excuses that SCSS hadn’t been in existence when I started writing pre-processors because they were and I wasn’t so early to the party. I only felt indented CSS will be cool. Without braces and semi-colon, my code was shorter, sweeter, and more pleasing to my eye even though regular CSS guys couldn’t figure out what was going on whenever I was styling my websites. You can see the line differences in the header image above
The image shows my text editor while I was switching from Sass to SCSS but it didn’t just happen as easy as it appears there. First I had to change all the files with .sass extension to .scss in my current project and I had that done with this little python script
import os,glob for file in glob.glob("*.sass"): os.rename(file, file[:-4] + 'scss')
Just that little code did the trick for me but it had to be in the same directory as my sass files. Next step was using sass2scss.com which was a good service for me converting my sass files neatly to scss.