alxjrvs · October 8, 2014 02:06
diff --git a/SassMeister-input-HTML.haml b/SassMeister-input-HTML.haml
 .button
  Click
 .button--error
  Error
 .button--success
  Success
 .button--pending
  Pending
diff --git a/SassMeister-input.scss b/SassMeister-input.scss
 // ----
 // Sass (v3.4.4)
 // Compass (v1.0.1)
 // ----

 //How to name your variables

 // First, create a pallette

 $red: #FF0000;
 $red-light: #FF4C4C;
 $red-dark: #7F2626;

 $blue: #0014FF;

 $green: #0AFF00;

 $white: #fff;

 //Then create a semantic pallete for your elements. 

 $button-background: $red-light;
 $button-text: $white;

 // then use the semantic variable in your css. 

 .button {
  background-color: $button-background;
  color: $button-text;
 }
diff --git a/SassMeister-output.css b/SassMeister-output.css
 .button {
  background-color: #FF4C4C;
  color: #fff;
 }
diff --git a/SassMeister-rendered.html b/SassMeister-rendered.html
 .button
  Click
 .button--error
  Error
 .button--success
  Success
 .button--pending
  Pending
	// ----
	// Sass (v3.4.4)
	// Compass (v1.0.1)
	// ----

	//How to name your variables

	// First, create a pallette

	$red: #FF0000;
	$red-light: #FF4C4C;
	$red-dark: #7F2626;

	$blue: #0014FF;

	$green: #0AFF00;

	$white: #fff;

	//Then create a semantic pallete for your elements.

	$button-background: $red-light;
	$button-text: $white;

	// then use the semantic variable in your css.

	.button {
	background-color: $button-background;
	color: $button-text;
	}