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
- check compass version: compass version
create _bass.scss file: partial scss for putting variables, mixins, compass imports such as:
Convert Sass to SCSS: sass-convert style.sass style.scss
Convert SCSS to Sass: sass-convert style.scss style.sass
- **http://net.tutsplus.com/tutorials/other/mastering-sass-lesson-1/ – very good video tutorial to get started with Sass & Compass.
With media queries:
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