Sass - css for programmers
• • ☕️ 3 min readIf you like long stories you could use a read on this http://alistapart.com/article/getting-started-with-sass . If not, sass is a professional grade css extension language, so let’s get on with it.
After reading about the fuss around sass the fears of switching to it may seem as ill grounded. There is no real danger in the command line or setting up a ruby environment, if you have difficulties with that go for help, me and others more experienced or more gifted are happy to help in order make a better internet.
First of all you may want to choose your tools, just to get started. I found a list on sitepoint with tools: http://www.sitepoint.com/my-favorite-sass-tools/ , but I must confess I used that article only for study, haven’t got any plan to use the tools, but if you are one that needs to play a little before getting to the real thing, the references and notes are great.
Another article on SitePoint really got my attention and got me to do some changes in the old code in terms of planning and optimising my files and code. The article http://www.sitepoint.com/8-tips-help-get-best-sass/ is one of my favorite ways on getting started with a new tech. I like applying best practices from the very start, so you may use another great tips article like this one : http://zerosixthree.se/8-sass-mixins-you-must-have-in-your-toolbox/ .
As I have joined a project on which the choice between compass and bourbon was already made, in favour of compass, I hadn’t the privilege to assist the decision or understand it, but I guess that bourbon is lighter and we really need as many features as we can grab. Although if you are privileged with the decision take a look at this great article: http://www.sitepoint.com/compass-or-bourbon-sass-frameworks/
After all that if you are still confused on sass vs scss extensions you can read a little history here: http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better .
Final step before getting to work maybe choosing a compiler for you sass code to css. If you are serious with you coding skills, one will not argue that the recommended way to compile the code is by using the command line, you’ll need ruby (rvm recommended) on your machine, but to remain short and correct, you’ll need to follow the steps recommended on http://sass-lang.com/install . When I read it I found that they cover almost all cases, so enjoy.
Sass awesomeness:
- https://github.com/HugoGiraudel/awesome-sass — really awesome list of links
- http://www.sache.in/ — discover sass extensions
TreeHouse has released some great video tutorials on sass:
- about mixins: https://www.youtube.com/watch?v=FGx80JSmLBc
- I invite you to discover more
Compass useful references:
- examples: http://compass-style.org/examples/
- utilities: http://compass-style.org/reference/compass/utilities/
- you maybe not know what this really refers to, but as you get into sass you will need to have defined the term of typography, here is the compass page: http://compass-style.org/reference/compass/typography/
- some insight, useful specs by an experienced dev: http://hugogiraudel.com/2013/03/25/compass-extensions/
Maybe this comment is not related to sas, but it is worth mentioning that if you are considering applying the latest standards, a page which lists all the styles and patterns you have worked on and anyone can use just by including parts of you code must be setting an example. This one: http://patterns.alistapart.com/ will come as the best reference and it’s not as time consuming as it may seem.
Sass and compass are already used in company of some frameworks. In my case I use it with laravel in a personal project like this https://github.com/panique/laravel-sass . Also at commercial level with symfony2 http://alexandre-salome.fr/blog/Sass-Compass-Assetic-In-Ten-Minutes or somewhere in those lines.
Sass is also great with creating sprites I think.. I haven’t tried it just yet, but I found what this guy (http://www.codechewing.com/library/automatically-generate-css-sprites-with-sass/) is saying really cool.
That being said, have fun and let me know of any type of feedback, I’ll be more than happy to learn with you.