tsmith512/SassMeister-input-HTML.html

## SassMeister-input-HTML.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sample</title>
</head>
<body>
  <div class="wrap">
    <div class="item">&nbsp;</div>
  </div>
</body>
</html>

## SassMeister-input.scss
// ----
// Sass (v3.4.11)
// Compass (v1.0.3)
// ----

/**
 * Examples for Presentation: Advanced Responsive Web Design
 * Part 1: Sass Basics
 * For More Information: http://github.com/tsmith512/arwd
 */

// Variables:
$blue:            #006DAF;
$monospace:       "Consolas", "Courier New", monospace;
$default-size:    1em;
$default-padding: 2 * $default-size;

// Maps:
$colors: (
  background: #1A1610,
  foreground: #E6D6BC,
  highlight:  #F05983,
);

body {
  background: map-get($colors, background);
  color: map-get($colors, foreground);
}

// Functions:
@function pixel-to-em($pixel-size, $inherited-font-size: 16px) {
  @return $pixel-size / $inherited-font-size * 1em;
}

button {
  font-size: pixel-to-em(12px); // Returns 0.75em
}

// Mixins:
@mixin my-button($color: #0000FF) {
  background-color: $color;
  border-width: 2px solid;
  border-color: lighten($color, 20%);
}
.button-one {
  @include my-button;
}
.button-two {
  @include my-button(#AA0000);
}

// Extendables:
.message {
  margin: 1em;
  padding: 1em;
  border: 1px solid #000;
  font-size: 1.2em;
}
.error {
  @extend .message;
  color: #600;
  border-color: #C00;
}

// Partials:
// SassMeister examples are all single-file; try this on your own environment!

// Comments:
/*
 * Standard / multi-line comments will appear in your final CSS file!
 * Use these comments to mark major sections or separate partials.
 */

// Double-slash / single-line comments WON'T appear in your final CSS!
// Use these comments for developer notes.

## SassMeister-output.css
/**
 * Examples for Presentation: Advanced Responsive Web Design
 * Part 1: Sass Basics
 * For More Information: http://github.com/tsmith512/arwd
 */
body {
  background: #1A1610;
  color: #E6D6BC;
}

button {
  font-size: 0.75em;
}

.button-one {
  background-color: #0000FF;
  border-width: 2px solid;
  border-color: #6666ff;
}

.button-two {
  background-color: #AA0000;
  border-width: 2px solid;
  border-color: #ff1111;
}

.message, .error {
  margin: 1em;
  padding: 1em;
  border: 1px solid #000;
  font-size: 1.2em;
}

.error {
  color: #600;
  border-color: #C00;
}

/*
 * Standard / multi-line comments will appear in your final CSS file!
 * Use these comments to mark major sections or separate partials.
 */

## SassMeister-rendered.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sample</title>
</head>
<body>
  <div class="wrap">
    <div class="item">&nbsp;</div>
  </div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Sample</title>
	</head>
	<body>
	<div class="wrap">
	<div class="item"> </div>
	</div>
	</body>
	</html>
	// ----
	// Sass (v3.4.11)
	// Compass (v1.0.3)
	// ----

	/**
	* Examples for Presentation: Advanced Responsive Web Design
	* Part 1: Sass Basics
	* For More Information: http://github.com/tsmith512/arwd
	*/

	// Variables:
	$blue: #006DAF;
	$monospace: "Consolas", "Courier New", monospace;
	$default-size: 1em;
	$default-padding: 2 * $default-size;

	// Maps:
	$colors: (
	background: #1A1610,
	foreground: #E6D6BC,
	highlight: #F05983,
	);

	body {
	background: map-get($colors, background);
	color: map-get($colors, foreground);
	}

	// Functions:
	@function pixel-to-em($pixel-size, $inherited-font-size: 16px) {
	@return $pixel-size / $inherited-font-size * 1em;
	}

	button {
	font-size: pixel-to-em(12px); // Returns 0.75em
	}

	// Mixins:
	@mixin my-button($color: #0000FF) {
	background-color: $color;
	border-width: 2px solid;
	border-color: lighten($color, 20%);
	}
	.button-one {
	@include my-button;
	}
	.button-two {
	@include my-button(#AA0000);
	}

	// Extendables:
	.message {
	margin: 1em;
	padding: 1em;
	border: 1px solid #000;
	font-size: 1.2em;
	}
	.error {
	@extend .message;
	color: #600;
	border-color: #C00;
	}

	// Partials:
	// SassMeister examples are all single-file; try this on your own environment!

	// Comments:
	/*
	* Standard / multi-line comments will appear in your final CSS file!
	* Use these comments to mark major sections or separate partials.
	*/

	// Double-slash / single-line comments WON'T appear in your final CSS!
	// Use these comments for developer notes.