KNACSS/sass/_00-config.scss

// Config file : variables, mixins, ...

// font sizes
$base-font-size	: 14px; // if "14px" then 1em = 14px
$line-height	: 1.5; // equiv line-height 1.5
$h1-size		: 3.2rem; // equiv "32px"
$h2-size		: 2.8rem; // equiv "28px"
$h3-size		: 2.4rem; // equiv "24px"
$h4-size		: 2.0rem; // equiv "20px"
$h5-size		: 1.8rem; // equiv "18px"
$h6-size		: 1.6rem; // equiv "16px"

// font stacks
$font-stack-common		: Helvetica, Arial, sans-serif; // common font
$font-stack-headings	: Helvetica, Arial, sans-serif; // headings font
$font-stack-monospace	: Consolas, 'DejaVu Sans Mono', Courier, monospace; // monospace font
$font-stack-universal	: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack

// font colors
$base-color					: #000; // text color on body and content
$primary-color				: #000; // text color on primary elements
$secondary-color			: #000; // text color on secondary elements
$headings-color				: #000; // text color on headings
$base-color-link			: #333; // base links color
$base-color-link-hover		: #000; // base hovered/focused links color

// backgrounds
$base-background		: #fff; // body background color
$primary-background		: #fff; // primary elements background color
$secondary-background	: #fff; // secondary elements background color

// spacings
$tiny-value				: 0.5rem; // tiny value for margins / paddings
$small-value			: 1rem; // small value for margins / paddings
$medium-value			: 2rem; // medium value for margins / paddings
$large-value			: 4rem; // large value for margins / paddings
$extra-large-value		: 6rem; // extra large value for margins / paddings
$ultra-large-value		: 10rem; // ultra large value for margins / paddings

// breakpoints
$tiny-screen			: 320px; // tiny screens media query
$small-screen			: 480px; // small screens media query
$medium-screen			: 768px; // medium screens media query
$large-screen			: 1024px; // large screens media query
$extra-large-screen		: 1280px; // extra large screens media query
$ultra-large-screen		: 1600px; // ultra large screens media query

// misc
$gutter		: 20px; // gutter value for grid layouts. Unit can be: %, px, em, rem

// booleans
$enable-ie678 			: true; // "true" to activate IE6/IE7/IE8 support
$enable-styling			: true; // "true" to design basic elements like code, mark, blockquotes, etc.
$enable-gmaps			: true; // if google maps is used
$enable-skip-links		: true; // "true" to design skip links for accessibility concerns
$enable-hyphens			: true; // activate automatic hyphens on small screens
$enable-helpers-width	: true; // decide whether or not you need width helpers
$enable-helpers-spacing	: true; // decide whether or not you need spacing helpers


// Sass mixins : don't touch or you'll be banned ;)
// px to em/rem 

@mixin rem($size) {	
	@if unitless($size) {
	 	font-size: ($size * 1rem) / 1rem * $base-font-size;
	 	font-size: $size * 1rem;
	}
	@else {
	  @warn "Please make sure `$size` is unitless."
	}
}
@mixin em($size) {	
	@if unitless($size) {
		$bf: $base-font-size / 1px;
	 	font-size: $size / $bf * 1em;
	}
	@else {
	  @warn "Please make sure `$size` is unitless."
	}
}
@mixin px($size) {	
	@if unitless($size) {
		$bf: $base-font-size / 1px;
	 	font-size: $size * $bf * 1px;
	}
	@else {
	  @warn "Please make sure `$size` is unitless."
	}
}