frontendbeast

// ----
// libsass (v3.2.4)
// ----

.c-nav {
  $root: #{&};
  
  position: relative;
  
  &:before {

frontendbeast

// ----
// libsass (v3.2.4)
// ----

$namespace: c-nav;

.#{$namespace} {
  position: relative;

  &:before {

frontendbeast

// ----
// libsass (v3.2.4)
// ----

.c-nav {
  position: relative;

  &:before {
    content: 'Menu';
    display: inline-block;

frontendbeast

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

// Sass breakpoints with contextual rem calculations
// ===================================================================
// I'm using rems, and most of my elements will use be relative to the 
// base setting on the html element (e.g. p, ul, etc.), but some will 
// have specific sizes, which I want to set in pixels but convert via

frontendbeast

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

@function em_as_string($px-value) {
    $size: $px-value/ 16px;
    @return $size#{em};
}

frontendbeast

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

p {
  margin: 0;
  
  & + & {
    margin-bottom: 2rem;

frontendbeast

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

.o-modal {
  background-color: rgba(#000, 0.5);
  color: rgba(white, 0.9);
}

frontendbeast

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

// Modified version of Harry Roberts' width mixin.
// https://github.com/csswizardry/discovr/blob/master/css/_trumps.widths.scss

// A mixin to spit out our width classes. Pass in the total number of columns 
// we want to have, and an optional suffix for responsive widths. The widths are

frontendbeast

@mixin svg-content() {
	background: url('something.svg');
}

@mixin svg($name, $position: false) {
	@if ($position!=false) {
		&:#{$position} {
			@include svg-content;
		}
	} @else {

frontendbeast

// ========================================================================== \\
// About
// ========================================================================== \\

// The Sass below will generate a class for each of the columns required to 
// fill your grid. For example, a four column grid requires columns with 
// widths of 1/4, 1/2 and 3/4.

// |----|    |    |    |
// |1/4 |