hagenburger

$mobile-max-width: 767px;
$mobile: only screen and (max-width: $mobile-max-width);
$mobile-wide: only screen and (min-width: 480px) and (max-width: $mobile-max-width);
$retina: (min-device-pixel-ratio: 2);

@media $mobile {
  #some-rules {
    background: red;
  }
}

hagenburger

$exend-compass-mixins: true;

.my-box {
  background: red;
  @include box-shadow(black, 0, 1px, 5px);
  @include clearfix;
}

.my-other-box {
  background: green;

hagenburger

<div class="bubble">
  Hallo
</div>

hagenburger

<div class="bubble">
  Hallo
</div>

hagenburger

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

// You can use inline %placeholders in Sass:
.form %form-item + .text {
  margin-top: 10px;
}

hagenburger

<input type="file">

hagenburger

Markdown Documentation File
===========================


A normal example without options (would output the HTML directly and syntax-highlighted afterwards):

~~~ example
<div class="header">
  ...
</div>

hagenburger

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----

%some-extendable {
  width: 50%;
}
 
.some-class-name {

hagenburger

Traditional way

my_key_link: 'World'
my_key: 'Hello %{link}!'                      link: link_to(t('my_key_link'), 'xy')
'Hello <a href="xy">World</a>!'

• Need to check if raw is required everytime
• Translators can loose the context

hagenburger

@sass colors.scss

@style background-color: change-color($turquoise, $lightness: 98%)
@style color: $pink

# Colors

No you can use Sass functions in color swatches:

@colors {