Comprehensive SASS/SCSS Tutorial

index.html

<br>
<h1>Comprehensive SASS/SCSS Tutorial</h1>
<h3>Examine CSS Window</h3><p>or</p><h3><a href="http://dl.dropbox.com/u/32649907/sass-tut.html" target="_blank">View Online</a></h3>

style.scss

@import "compass";
/*

SASS is a preprocessor. Preprocessors help you to write
CSS in a more programmatic, clear and organized way.

We will be writing SCSS which is a less strict syntax of SASS. The beauty of SCSS is that we can still write regular old CSS and add in SCSS syntax wherever possible.

You will work in a SCSS file (eg style.scss) which will be converted into a standard CSS file. When used locally SASS watches for changes and compiles out a CSS file after a change to your SCSS file is detected. In production environments you would only upload the compiled CSS file. (No need for browser support)

IN ORDER TO BEGIN USING SASS/SCSS you'll need to install some Ruby Gems. This is a one time thing and should not deter you from getting started right away. Below is a link to explain the simple install:

  Setting Up SASS: Beginner's Guide
  http://thesassway.com/beginner/getting-started-with-sass-and-compass
	
IF YOU'D LIKE TO START WRITING IMMEDIATELY

	1. Create a New Pen
	2. Click the gear icon in the CSS window
	3. Choose SCSS w/ Compass
	
	

===============================
   Contents of this Doc
===============================

1. Nesting
2. Variables
3. Extends
4. Mixins
5. Interpolation
6. Functions
7. @include
8. Compass


=================================
			Nesting
=================================*/

/*
To jump right in.. After your SCSS file is processed, the following SCSS code block will result in the compiled CSS. Unfortunately, the shorter syntax won’t make your CSS files any smaller or load any faster. But nesting will help keep your code clean, logical, and well-organized, which should also make it easier to manage over time. */

/* SCSS */
body.home {
  .media-unit {
    border: 1px solid #ccc;
    background-color: #fff;
    .right {
      border-left: 1px solid #ccc;
      h1 {
        font-size: 24px;
      } /* close h1 */
    } /* close .right */
  } /* close .media-unit */
} /* close body.home */

/* Compiled CSS */
body.home .media-unit {
  border: 1px solid #ccc;
  background-color: #fff;
}
body.home  .media-unit .right {
  border-left: 1px solid #ccc;
}
body.home .media-unit .right h1 {
  font-size: 24px;
}

/*
This next example shows how you can use the ampersand (&) to mark a placeholder for the selector in context. The ampersand acts similarly to the "this" in javascript. */

/* SCSS */
a {
	color: #555555;
	&:hover {
		color: #787878;
	}
	&:active {
		color: #111111;
	}
}

/* Compiled CSS */
a { color: #555555; }
a:hover { color: #787878; }
a:active { color: #111111; }

/*
SASS allows you to nest media queries inside other rules,
making it easier to see which styles are applied
to a given object on your page. */

/* SCSS */
.container {
  width: 940px;
  @media screen and (max-width:940px) {
    width: auto;
	margin: 0;
	padding: 1em;
  }
  @media screen and (max-width:640px) {
    width: auto;
	margin: 1em;
	padding: .5em;
  }
  @media screen and (max-width:320px) {
	width: 90%;
    margin: .25em;
	padding: 0;
  }
}

/* When processing this file, Sass knows to convert this back into valid CSS, copying the .container selector inside the media query. */

/* Compiled CSS */
.container {
  width: 940px;
}

@media screen and (max-width:940px) {
  .container {
    width: auto;
  	margin: 0;
	padding: 1em;
	}
}

@media screen and (max-width:640px) {
  .container {
    width: auto;
	margin: 1em;
	padding: .5em;
  }
}

@media screen and (max-width:320px) {
  .container {
    width: 90%;
    margin: .25em;
	padding: 0;
  }
}


/*
=================================
			Variables
=================================*/

/*
Variables make code easier to change by reducing duplication. They also allow you to assign names to special property values like colors, which helps you understand the intent behind a given style. */

/* SCSS */
$typekit-green: "#99cc00";
$typekit-link-color: $typekit-green;

a {
  color: $typekit-link-color;
}

/* Compiled CSS */
a {
  color: "#99cc00";
}

/*
Pro-tip: You can alter the color by using an included "lighten" or "darken" function or simply do arithmetic in the property declaration. SASS + Compass has many tricks like this up its sleeve. */

a {
  color: $typekit-link-color + #333333; /* Add (+) the hex code to the variables hex code */
}

/*
=================================
			Extends
=================================*/

/*
SASS can tell one selector to inherit all the styles of another without duplicating the CSS properties. Below exemplifies a 'pseuo-class' that acts as a pointer by using the @extend control directive followed by the
indentifier in which you'd like to extend. */

/* SCSS */
%main-padding {
	padding: 1em;
}
article {
	@extend %main-padding;
	color: #005288;
}
.sidebar {
	@extend %main-padding;
}

/* Compiled CSS */
article, .sidebar {
  padding: 1em;
}

article {
  color: #005288;
}

/* You can also extend classes */

/* SCSS */
.default-box-model {
	padding: 1em;
	margin: .25em;
	border: 1px solid #aeaeae;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
article {
	@extend .default-box-model;
	color: #d00d1e;
}
.sidebar {
	@extend .default-box-model;
}

/* Compiled CSS */
.default-box-model, article, .sidebar {
  padding: 1em;
  margin: .25em;
  border: 1px solid #aeaeae;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

article {
  color: #d00d1e;
}

/*
=================================
			Mixins
=================================*/

/*
Mixins are reusable sets of properties or rules that you include, or “mix,” into other rules. You define them using the @mixin keyword, and include them using the @include keyword.

In the example below, the style properties contained in the highlighted-bold-text mixin are applied to all of the span elements inside .result-with-highlights */

/* SCSS */
$highlight-color: #ffa;

@mixin highlighted-bold-text {
  font-weight: bold;
  background-color: $highlight-color;
}

.result-with-highlights {
  span {
    @include highlighted-bold-text;
  }
}

/* Compiled CSS */
.result-with-highlights span {
  font-weight: bold;
  background-color: #ffffaa;
}

/*
Below I’ve defined a mixin that applies 4px rounded corners to an element, using vendor-prefixed properties for WebKit, Firefox, and IE, followed by the standard border-radius property. I’ve also defined the corner radius as a variable so it’s easier to change later on. */

@mixin rounded-corners {
  $rounded-corner-radius: 4px;
  -webkit-border-radius: $rounded-corner-radius;
  -moz-border-radius: $rounded-corner-radius;
  -ms-border-radius: $rounded-corner-radius;
  border-radius: $rounded-corner-radius;
}

.button {
  @include rounded-corners;
}

/*
This next example shows that you can have a general animate mixin with default transition values declared and pass in data to override the default values for the animation. */

@mixin animate($time: .5s, $ease: ease-in-out, $prop: all) {
	-webkit-transition: $prop $time $ease;
	-moz-transition: $prop $time $ease;
	-o-transition: $prop $time $ease;
	transition: $prop $time $ease;
}
header { @include animate; } 						/* default animation using set values */
article { @include animate(); } 					/* this works too */
aside { @include animate(1s); }						/* override just the time (first argument) */
footer { @include animate(2s, linear, color); }	/* pass all new values to mixin */

$ourTime: 3s;
$ourEase: linear;
$ourProperty: color;
.modal { @include animate($ourTime, $ourEase, $ourProperty); } 	/* new values by passing SASS variables */
button { @include animate($prop: background); }					/* override one, just declare what you want to override */
	
/* A different approach to passing arguments to a mixin */

@mixin animate($args) {
	-webkit-transition: $args;
	-moz-transition: $args;
	-o-transition: $args;
	transition: $args;
}

header { @include animate(all .5s ease-in-out); }

/* Below shows how you can place a media query inside a mixin in order to give your media query a name, versus remembering 57ems is tablet and 67ems is desktop...*/

/* SCSS */
@mixin tablet {
	@media (min-width: 57em) {
		@content
	}
}
@mixin desktop {
	@media (min-width: 67em) {
		@content
	}
}
article {
	width: 100%;
	@include tablet { width: 70%; }
	@include desktop { width: 60%; }
}

/* Compiled CSS */
article { width: 100%; }

@media (min-width: 57em) {
	article { 
		width: 70%;
	}
}
@media (min-width: 67em) {
	article {
		width: 60%;
	}
}

/* A more efficient way to tackle IE */

/* SCSS */
@mixin ie7 {
	.lt-ie8 & { @content }
}
@mixin ie8 {
	.lt-ie9 & { @content }
}
article {
	width: 20em;
	@include ie8 { width: 22em };
	@include ie7 { width: 21em };
}

/* Compiled CSS */
article {
	width: 20em;
}
.lt-ie9 article {
	width: 22em;
}
.lt-ie8 article {
	width: 21em;
}


/*
=================================
		Interpolation
=================================*/

/* You can also use SassScript variables in selectors and property names using #{ $typekit-green } interpolation syntax. ($typekit-green being the variable you'd like to interpolate)

*/

/* SCSS */
$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

/* Compiled CSS */
p.foo {
  border-color: blue;
}

/* Another similar example as the previous, but in this case, if we did not interpolate our variables, SASS will divide the two variables resulting in 0.4 (and no unit of measure - which we don't want) */

/* SCSS */
p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

/* Compiled CSS */
p {
  font: 12px/30px;
}

/* This example uses interpolation and a for each loop to set the top, left and right borders of the article to 2px solid red. */

@mixin borders($sides) {
	@each $side in $sides {
		border-#{$side}: 2px solid red;
	}
}
article {
	@include borders(top left right);
}

/*
=================================
			Functions
=================================*/


/* A function is very similar to a mixin, however the output from a function is a single value. This can be any SASS data type, including: numbers, strings, colors, booleans, or lists. */

/* SCSS */
@function my-calculation-function($some-number, $another-number){
  @return $some-number + $another-number
}

.my-module {
  padding: my-calculation-function(10px, 5px);
}

/* Compiled CSS */
.my-module {
  padding: 15px;
}

/* The following function determines font-size based on the argument passed (2 in this case) multiplied by Pi. It then returns the result. */

/* SCSS */
@function xPi($var) {
	@return 3.1415926 * $var;
}

article {
	font-size: #{xPi(2)}em;
}

/* Compiled CSS */
article {
	font-size: 6.28318em;
}

/*
=================================
		@import + partials
=================================*/

/* Sass extends the CSS @import rule to allow it to import SCSS and Sass files. All imported SCSS and Sass files will be merged together into a single CSS output file. In addition, any variables or mixins defined in imported files can be used in the main file. */

/*


@import "foo"; 


*/

/* Importing foo.scss - no extension needed */

/* If you have a SCSS or Sass file that you want to import but don’t want to compile out to a new CSS file, you can add an underscore to the beginning of the filename on your computer. This will tell Sass not to compile it to a new CSS file and will instead merge it with your existing SCSS document. You can then import these files without using the underscore.

This is a fantastic way of organzing your SCSS files into modules/pages with only one HTTP request. */

/*

files on your computer:
_online-banking.scss
_card-servicing.scss

@import "online-banking"; 
@import "card-servicing"; 

*/


/*
=================================
			Compass
=================================*/

/* Compass is basically a library of functions and add-ons for SASS that includes the ability to create mixins, functions, CSS sprites and typographic rhythms.

The below example shows Compass' box-shadow() function compiles out to all the vendor prefixed box-shadow properties we need. This can be done with every property definition that requires a prefix. This is great because if one prefix changes or a new one is added, you don't have to locate every instance of it in your CSS, you just recompile and Compass does the grunt work. 

note: this example also shows Compass' rgba() function that'll process a hex code into rgba value. This makes it easier to work with your familiar hex codes plus you can apply an alpha channel to a color without explicitly writing rgba color values. */


/* SCSS */
article {
	@include box-shadow(rgba(#d00d1e, 0.5) 0 3px 3px inset);
}

/* compiles out to: */
article {
	-webkit-box-shadow: rgba(208, 13, 30, 0.5) 0 3px 3px inset;
	-moz-box-shadow: rgba(208, 13, 30, 0.5) 0 3px 3px inset;
	box-shadow: rgba(208, 13, 30, 0.5) 0 3px 3px inset;
}


/* SOURCES 

http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
http://robots.thoughtbot.com/post/12974565313/controlling-color-with-sass-color-functions
http://sass.nathancrank.com

*/

body {
  background: #ddd;
}


h1, h2, h3, p {
   margin: 0 auto;
  font-family: Helvetica, Arial, sans-serif;
  display: inline;
}

h1 { color: #272727; display: block; }
h3, a, a:hover, a:visited { color: #9a3232; text-decoration: none; }
p { margin: 0 .5em; font-size: .88em; }