mazipan

<input class="radio" type="radio" id="radio-1" name="radio" />
<label for="radio-1">Yes</label>

<input class="radio" type="radio" id="radio-2" name="radio" />
<label for="radio-2">No</label>

<input class="radio" type="radio" id="radio-3" name="radio" disabled="true" />
<label for="radio-3">Disabled</label>

mazipan

.radio
{
    position: absolute;
    left: -9999px;
    
    & + label
    {
        position: relative;
        display: inline-block;
        padding: 2px 30px;

mazipan

@mixin clearfix()
{
    *zoom: 1;
    &:before,
    &:after
    {
        display: table;
        content: ' ';
    }
    &:after

mazipan

.row()
{    
    @include clearfix(); 
    margin: 0 auto;
    max-width: 92.308em;
}

mazipan

$columnCount: 12;
@for $i from 1 through $columnCount
{
    .column-#{$i}
    {
        float: left;
        width: ((100/$columnCount)*$i)*1%;
    }
}

mazipan

<div class="row">This is class .row</div>

<div class="row">
  <div class="column-12">This is class .column-12</div>
</div>           

<div class="row">
  <div class="column-3">This is class .column-3</div>
  <div class="column-3">This is class .column-3</div>
  <div class="column-6">This is class .column-10</div>

mazipan

$i : 12;
@while $i > 0 {

  .column-#{$i} { 
  	width: 2em * $i
  }

  $i: $i - 2;
}

mazipan

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;

mazipan

<input class="checkbox" 
       type="checkbox" 
       id="checkbox-1" 
       name="checkbox"/>
<label for="checkbox-1">Check 1</label>

<input class="checkbox" 
       type="checkbox" 
       id="checkbox-2" 
       name="checkbox"/>

mazipan

$theme : #0096D9;

.checkbox
{
    position: absolute;
    left: -9999px;
    
    & + label
    {
        position: relative;