functions.md

Sass Functions

Some useful functions

Table of contents

• Assets
• Black and white opacity
• Ease
• px to em or rem
• Fontweights
• Opposite direction

Assets

Function to set assets path

Use:

.foo {
  background-image: image('image.png');
}

@fontface {
  src: font('fontfolder/fontfile.eot');
}

Output:

.foo {
  background-image: url("../assets/images/image.png");
}

@fontface {
  src: url("../assets/fonts/fontfolder/fontfile.eot");
}

Black and white opacity

Black and white opacity shortcut function

Use:

.foo--black {
  background: black(.5);
}

.foo--white {
  background: white(.5);
}

Output:

.foo--black {
  background: rgba(0, 0, 0, 0.5);
}

.foo--white {
  background: rgba(255, 255, 255, 0.5);
}

Ease

Named easings to bezier function

Use:

.foo {
  transition: all .3s ease(in-out-circ);
}

Output:

.foo {
  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

px to em or rem

Use:

.foo {
  font-size: em(16px);
  width: rem(100);
}

Output:

.foo {
 font-size: 1em;
 width: 6.25rem;
}

Fontweights

Use:

.foo {
  font-weight: fw(light);
}

Output:

.foo {
  font-weight: 300;
}

Opposite direction

Use:

.foo {
  background-position: opposite-direction(top right);
}

Output:

.foo {
  background-position: bottom left;
}

Docs

Sass

• Functions
• Mixins

Stylus

• Functions
• Mixins