While i was redesigning my website, i discovered Sass. i’m wondering if it’s really more efficient if i use sass instead of just coding the css the old way. i do remember sometimes my stylesheets does become confusing when it gets bigger… I’ll try it for a while and see if i like it or not. Below is the steps I took to get started with Sass & Compass 🙂
Installing Sass on mac
1. applications > utlities > terminal
2. type in “sudo gem install sass“, put in computer password when it asks.
- Â sass -h : list all the commands
- Â sass –Â -watch styles.scss:styles.css : automatically updates .css file whenever you make a change to .scss.
- Â sass –Â -style compressed styles.scss:styles.css : Output style. Can be nested (default), compact, compressed, or expanded
Updating to the latest gem on ruby on mac
- check which version: gem -v
- type in sudo gem update –Â -system
Compass: css framework, collection of already created styles.
- sudo gem install compass
- put in password
- compass create projectname : it’ll create some folders with .scss files.
- compass watch projectname : watching the project folder for updates & updates automatically
- compass watch –Â -output-style=compact
or:nested
,:expanded
,:compact
,:compressed
- check compass version: compass version
SCSS
create _bass.scss file: partial scss for putting variables, mixins, compass imports such as:
@import “compass/reset”,
@import “compass/css3”,
@import “compass/utilities”
Convert Sass to SCSS: sass-convert style.sass style.scss
Convert SCSS to Sass: sass-convert style.scss style.sass
Resource Links:
- **http://net.tutsplus.com/tutorials/other/mastering-sass-lesson-1/ – very good video tutorial to get started with Sass & Compass.
- http://speakerdeck.com/u/imathis/p/sass-compass-the-future-of-stylesheets-now”
- http://www.gayadesign.com/articles/why-sass-and-compass-should-be-in-your-workflow/
- http://alistapart.com/article/getting-started-with-sass
- http://sass-lang.com/tutorial.html
- http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html
Compass:
- http://www.hongkiat.com/blog/saas-compass/
- http://compass-style.org/help/tutorials/best_practices/
- http://compass-style.org/reference/compass/css3/
With media queries:
- http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32
- http://css-tricks.com/media-queries-sass-3-2-and-codekit/
Terminal Commands used most often:
ls – lists the directory files
cd – change directory: can drag the folder from desktop to terminal, so “cd folderpath”
Cheatsheet of commands: https://github.com/0nn0/terminal-mac-cheatsheet/wiki/Terminal-Cheatsheet-for-Mac-%28-basics-%29