hagenburger

# Functions

```
@colorfuncs
foo()
```

hagenburger

source: styles.scss

javascript-before:
  - http://code.jquery.com/jquery-1.11.1.min.js
  - /assets/angular-1.2.3.js
  - |
    $(function() {
      alert("Hello World!");
    }

hagenburger

<div class="neue"></div>
<div class="darkenlighten"></div>
<div class="tintshade"></div>

hagenburger

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

$gap: 20px;

.my-class {
    margin: 10px -20px;
    // vs.

hagenburger

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

$gap: 20px;

.my-class {
    margin: 10px -$gap;
    // vs.

hagenburger

// ----
// Sass (v3.3.9)
// Compass (v1.0.0.alpha.20)
// Compass Placeholders (v1.1.1)
// ----

@import "compass";
@import "compass-placeholders";

// @extend helps, when all properties 

hagenburger

// ----
// Sass (v3.3.9)
// Compass (v1.0.0.alpha.20)
// ----

/* lighten() only works well with dark colors: */

#test {
  $color-1: hsl(100, 100, 10%);
  useful-1: 28%;

hagenburger

// ----
// Sass (v3.3.9)
// Compass (v1.0.0.alpha.20)
// ----

#x {
  result: 50px * 10%;
}

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 (v3.3.8)
// Compass (v1.0.0.alpha.18)
// ----

#x {
  @for $i from 3 through 1 {
    content: "#{$i}";
  } 
}