Generated by SassMeister.com.

SassMeister-input-HTML.haml

.dialog
  %a.dialog__button{:href => '#'} Click

SassMeister-input.sass

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----

// global/_variables.sass

$border-radius: 4px

$grey--light: #f9f9f9
$grey--medium: #edeeee
$pink: #f62f62
$white: #ffffff

$body-background: $grey--light
$border-colour: $grey--medium

// global/_utility.sass

%appearance-none
  appearance: none

%border-radius
  border-radius: $border-radius

%inline-block
  display: inline-block
  *display: inline
  *zoom: 1

%remove-underline
  text-decoration: none

%uppercase
  text-transform: uppercase

// base/_base.sass

body
  background: $body-background
  font-family: "Helvetica Neue", sans-serif
  font-weight: 300

// components/_button.sass

%button
  @extend %appearance-none
  @extend %border-radius
  @extend %inline-block
  @extend %remove-underline
  @extend %uppercase
  background: $pink
  border: 1px solid transparent
  color: $white
  padding: 0.5em 1.5em

%button--large
  font-size: 1.5rem

// components/_island.sass

%island
  @extend %border-radius
  border: 1px solid $border-colour
  background: $white
  padding: 1.5rem

%island--extra
  padding: 2rem

// ui/_dialog.sass

.dialog
  @extend %island
  @extend %island--extra
  margin: 0 auto
  max-width: 30em

.dialog__button
  @extend %button
  @extend %button--large

SassMeister-output.css

.dialog__button {
  appearance: none;
}

.dialog__button, .dialog {
  border-radius: 4px;
}

.dialog__button {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

.dialog__button {
  text-decoration: none;
}

.dialog__button {
  text-transform: uppercase;
}

body {
  background: #f9f9f9;
  font-family: "Helvetica Neue", sans-serif;
  font-weight: 300;
}

.dialog__button {
  background: #f62f62;
  border: 1px solid transparent;
  color: white;
  padding: 0.5em 1.5em;
}

.dialog__button {
  font-size: 1.5rem;
}

.dialog {
  border: 1px solid #edeeee;
  background: white;
  padding: 1.5rem;
}

.dialog {
  padding: 2rem;
}

.dialog {
  margin: 0 auto;
  max-width: 30em;
}

SassMeister-rendered.html

<div class='dialog'>
  <a class='dialog__button' href='#'>Click</a>
</div>