Sass

Intro to Sass

  • We developers want easy-to-read and easy-to-write CSS. The browser still wants plain jane CSS.
  • The comprommise is Sass, a simpler way to write CSS, but which compiles into regular CSS.
  • A .scss file (stands for "sassy css") converts to a .css file.
  • Sass is a superset of CSS. That is, it's backwards-compatible, so normal CSS works just fine in a .scss file.
  • Remember, browsers only read the .css file. They know nothing of Sass.
  • Rule of thumb: Don't prematurly optimize. Don't be efficient until there's something that needs to be efficient.

Prepros (the preprocessor app)

  • Prepros is a free application used to compile your Sass to CSS.
  • Chosing 'Auto Compile' will automatically compile your .scss file into a .css file every time you save it.

Set-up

  • Create a global.scss file in your repo.
  • Drag your directory to the Prepros window. It should find the Sass file and list it in the window.
  • Go into Sublime and save your global.scss file. This will trigger Prepros to generate global.css.
  • In your HTML, include a reference to the name of the compiled .css file.
  • Hit the small globe icon in the lower-left (tooltip says 'Open project live url'). Prepros will set up a lightweight local server (aka "virtual host"). and open your browser to the URL of that local server. It'll b something like localhost8001.
  • Remember: If you edit the CSS file, it will get over-written next time you edit the Sass

Nested selectors

  • psuedo-selectors can be nested inside their parent using &, like &:before
  • Following an element with & will append the elements it is nested within in front of it.

Variables

  • A variable stores information that can be re-used throughout your document.
  • In .scss, you specify a variable by prefixing its name: $my-color: #000;
  • The benefit is to allow you a simple way to change one variable, and effect multiple things on your page without having to manually edit each one.
  • Another good example is saving border-radius as it's used in multiple places, and requires consistency. $corner: 12px;
  • To call the variable in your .scss, apply it using p { border-radius: $corner; background: $my-color; }
  • Variables have scope. If a variable is defined outside of all rule-sets, it is global and can be used anywhere on the page. If it is within a rule-set (it is a delcaration of one), it will on exist for the propteries inside of it.

Compiling all your CSS into one file & Partials

  • We do it becuase it allows the server to make just one request to retreive the css, not multiple.
  • If you have a .scss filename that is prefixed with an underscore, that is known as a 'partial'
  • Partials are designed as stand-alone pieces of styling that can imported into the necessary files
  • To include the file _reset.scss you can include it at the top of your compiled CSS using @import "reset";
  • global.scss typically lists the necessary partials, almost like a table of contents.
  • It makes our lives as developers if we have sections/stylings broken out into partials as opposed to having everything on a single page.

Colors

  • You can edit colors or variables using key terms like lighten, darken
  • Syntax: color: lighten($maroon, 50%);
  • You can lighten, darken, desaturate, fade-out
  • fade-out will convert a hex into rgba, fade-out(white, .5) will yield rgba(255, 255, 255, .5))

Mixins

  • Ways to store blocks of rules together.
  • Espeically good for blocks of rules with variable value.
  • Typically you'd host mixins in their own file, and import that file as a partial.

Example with no variable:

 1     @mixin rounded-corners {
 2         -webkit-border-radius: 12px;
 3            -moz-border-radius: 12px;
 4              -o-border-radius: 12px;
 5                 border-radius: 12px;
 6     }
 7 
 8     p {
 9         @include rounded-corners(value);
10     }

Example with variable:

 1   @mixin rounded-corners($variable) {
 2      -webkit-border-radius: $variable;
 3         -moz-border-radius: $variable;
 4           -o-border-radius: $variable;
 5              border-radius: $variable;
 6  }
 7 
 8  p {
 9      @include rounded-corners(value);
10  }

Example with default value if none is specified:

 1   @mixin rounded-corners($variable: 6px) {
 2      -webkit-border-radius: $variable;
 3         -moz-border-radius: $variable;
 4           -o-border-radius: $variable;
 5              border-radius: $variable;
 6  }
 7 
 8  p {
 9      @include rounded-corners;
10  }

Math

  • You can use operational math to calculate things in .scss
  • eg. (100% / 4)
  • e.g. ($default_padding * 2)

Extends

  • @extend .my-class will pull all the styling from the specified my-class into the ruleset where the @extend is declared.

Comments

  • Comments that start with // disappear when compiled, meaning your users won't see them.

Compass

  • A library of commonly used mixins for us to reference and use
  • Click the "Use Compass" checkbox in Prepros
  • Documentation

Sprites

  • Sprites are little images.
  • Spritemaps are all those images combined into a single file.
  • Servers only need to take one call to the server to retrieve the spritemap. This makes pages faster.
  • Using CSS, we can reposition the spritemap in order to reveal only the image we want.
  • Compass gives you easy classes or mixins to get spritemaps to work.
  • To use, click Use Compass and Full Compass Support checkbox in Prepros
  • Have a look at santheo's GitHub Pages repo for an example.
  • Here's another repo that gives a super simple example of how to use a vertical spritemap.
  • Read the documentation on compass-style.org