Resources, Web Design

SASS+Compass

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

  1. check which version: gem -v
  2. type in sudo gem update – -system

Compass: css framework, collection of already created styles.

  1. sudo gem install compass
  2. put in password
  3. compass create projectname : it’ll create some folders with .scss files.
  4. compass watch projectname : watching the project folder for updates & updates automatically
  5. 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

Leave a Reply