SCSS, SASS, Sassy CSS, Compass, CSS Awesomeness

I had a chance to experiment with Sassy CSS recently.  As usual, here are the notes so I don't forget what my tinkering uncovered.

Compass is the best tool I found to work with SCSS.  Install instructions can be found here:  http://compass-style.org/install/.  For installation, install Ruby, and then run the following commands:  > gem update --system and then > gem install compass.

Ignore the instructions under "Tell us about your project and we'll help you get it set up:".  Open up a command prompt with administrator privs, change directory to your project directory (this can be an existing solution or a new solution).  Run compass create <project name>.

This will create some default directories and files for css, sass and create a config.rb file.  Edit config.rb to see where compass thinks folders are located.  The settings are pretty straight forward.  Here is the setup that I am initially happy with:

# in config.rb:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "scripts"
line_comments = false
environment = :development
output_style = :expanded

Change the config file to match the directory names of your project.  After this is set up, run >compass watch from the command line in the root of your project.  If you change the configuration (or want Compass to stop, ctrl-c at the command prompt and Y to "stop the batch".  >compass watch again to use your new config settings.

I removed the default scss and css files that were created during compass create <project name> and created a style.scss file in the sass directory.  You don't need to add style.css, Compass will create this for you.  If you do create it, Compass will update it.

After this is set up, it's time to start coding!  Edit style.scss, save the changes and then view css/style.css.  It should be automatically updated.  Pretty rad.

This article wasn't intended to dig into the language of scss, there are plenty of tutorials out there.  Along my journey, I also found this page that was useful to test scss:  http://sassmeister.com/

I am excited to start learning SCSS and incorporate it into my projects.  It's going to make things a lot easier.  If you haven't started using it yet, this is another handy dandy tool that will help speed your development up:  http://livereload.com/.  It basically detects changes in CSS and refreshes your browser for you.

Heaven.

favicon

Time to revisit the favicon for websites.  I always forget how to do this one..

The first part is pretty easy.  Upload your starting image to http://www.favicon.cc/?.  Pretty self explanatory.
The next step is putting it in the head of your html files.  Here is the link statement:  <link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />  Place the favicon.ico in the root directory of your site.

If your favorite favicon won't update, change the href to force it with href='/favicon.ico?v=2'.  Your browser won't know what hit it.

Forgotten more than I remember

Ok, finally had enough of the thought "damn, I did that once, but I can't remember how".  Stay posted for random web development tasks and whatever else in life I care to document to make it easier the next time..