Notes and links for Intro to Sass

intro to sass.md

Introduction to Sass

Sass is a CSS pre-processor language to add on exciting, new, awesome features to CSS. Sass was the first language of its kind and by far the most mature and up to date codebase.

Sass was originally created by Hampton Catlin (@hcatlin). The extension and continuing evolution of the language has all been the result of years of work by Nathan Weizenbaum (@nex3) and Chris Eppstein (@chriseppstein).

http://sass-lang.com/

Why Sass?

• SCSS >= CSS
• Sass indentation based

Why Sass and Less?

• Because
• OK, they say it better http://css-tricks.com/sass-vs-less/

Language Versions

• Ruby Gem
• libsass in C
• grunt-sass (using node-sass)
• grunt-contrib-sass (a wrapper that requires Ruby and the Sass gem installed)

Imports

• Importing as CSS acts like a regular CSS import
• files with leading underscores not compiled/output by default
  • don't have the same file with an underscore and a version without

Variables

• Start with a dollar sign, like $name
• Good for named colours and fonts that you may want to use consistently though out the CSS and have any changes cascade
  • $font-header-desktop: helvetica

Mixins

• Can be used across several sheets through imports
• Should usually be in their own sheet unless the mixin is used only by a single sheets
• Are defined as @mixing your_awesome_name { /* beautiful and reusabe code here */}
• Are inlined into a selector with @include your_awesome_name;
• Can be passed parameters!

Placeholders and @extend

• Placeholder functions start with a % and do not produce any css unless they are @extended
• @extend acts like a mixin, but shares a class
• good for orphan property values used by multiple rules
• Should only be used if the selector produced is smaller than the property it replaces
  • Ex (#foo ul li.bar > a { width: 1} has a selector longer than the single rule it replaces.

%width-small {
	width: 10px;
}

Compass

Compass is a Ruby library made up of Sass mixins and ruby functions that is developed by Chris Eppstein

Language Version

• Ruby
• https://github.com/gruntjs/grunt-contrib-compass, but it requires Ruby and the Compass gem to be installed on the machine :(

Why you'd use it

• Prebuilt mixins that take the guesswork out of vendor prefixing
• Output can be optimized based on what browsers you are targetting

Spriting

Compass makes spriting dead simple

1. Add your images to a folder with names maching the css class you want to use
2. @include 'yourfolder/*.png';
3. @include all-yourfolder-sprites;
4. Compile The unique file name is created based on the hash of the child images. This means that the file name will only change if you add or remove files, so it can stash cached till you change it.

Tools

• codepen.io allows you to save and share snippets. Also provides access to Compass
• trysass.com provides a live preview of what the CSS that the SCSS will be compiled to. No compass