History behind Sass

• 2006 Hampton Catlin introduced us to HAML. A lightweight markup pre-processor language that uses indentation (whitespace) to separate blocks

%article#main-author.primary-article{"data-author-id" => "999"}
  %h1 primary header title for paragraph below
  %p
    %a.external-link{:href => "#"} Example of body text link

					

<article id="main-author" class="primary-article" data-author-id="999">
	<h1>primary header title for paragraph below</h1>
	<p>
	  <a href="#" class="external-link">Example of body text link</a>
	</p> 
</article>									
								

HAML for CSS === Sass

• Indentation and whitespace based language

header
  width: 100%
  .nav
    text-decoration: none
    background: #fff
    color: #333
    p
      font-weight: bold
								

header {
	width: 100%;
}
header .nav {
	text-decoration: none;
	background: #fff;
	color: #333;
}
header .nav p {
	font-weight: bold;
}
								

Advantages of Sass

• sass and scss
• variables
• mixins
• functions

Keep in mind

Variables

• Commonly used values
• Sizing
• Color schemes
• Base filesystem variables
• _config file

Data types

• numbers (e.g. 1.2, 13, 10px)
• strings of text, with and without quotes (e.g. "foo", 'bar', baz)
• colors (e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5))
• booleans (e.g. true, false)
• nulls (e.g. null)
• lists of values, separated by spaces or commas (e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans-serif)

Variable Scope

All variables outside of a mixin or function will have a global scope. Any changes to the variable will set further references of the variable:

$text-color: blue;

.error {
  $text-color: red;
  color: $text-color;
}

.normal-text {
  color: $text-color;
}							
						

!default flag

• If the variable has an assignment, it will not be re-assigned
• variables with null value will be considered unassigned and will be assigned with !default

// !default values assigned mixin specified variables 
$box-padding: 10px !default;
$box-background-color: orange !default;


// Mixin arguments set to specified variables as defaults
@mixin the-box($padding: $box-padding, 
  $background-color: $box-background-color) {
  
  padding: $padding;
  background-color: $background-color;
}							
						

Functions

• Functions are simple processes that will perform a "function" and return a value
• @return must be included

$default-browser-size: 16px !default;

@function responsive-size($fontSize: $default-browser-size) {
	@return $fontSize/$default-browser-size * 1em;
}


@function rs($fontSize: $default-browser-size) {
	@return responsive-size($fontSize);
}
							
						

More involved example

@function linearGradientColors($stop-colors...) {
	$full: false;	
	@each $stop-color in $stop-colors{
		@if $full {
			$full: $full + ',' + $stop-color;
		} @else {
			$full: $stop-color;
		}
	}
	
	$full: unquote($full);

	@return $full;
}

@function lgc($stop-colors...) {
	@return linearGradientColors($stop-colors...);
}							
						

Mixins

• Repeated CSS patterns
• Establishment of DRY principle

$border-position-all: "all";

@mixin add-border($border-position: all, $border-size: 1px, 
  $border-pattern: solid, $border-color: black) {
  
  @if $border-position == $border-position-all {
    border: $border-size $border-pattern $border-color;
  }
  
  @else {
    border-#{$border-position}: $border-size 
    $border- pattern $border-color;
  }
}								
							

More involved mixins

• Cheap Sass Tricks
• By John W. Long
• Style guide