Sass: useful functions, mixing, imports, variables etc

style.scss

// dependencies
@import "vendor/normalize-scss/_normalize";
@import "vendor/bourbon/app/assets/stylesheets/_bourbon";
@import "vendor/neat/app/assets/stylesheets/_neat";
@import "vendor/bitters/app/assets/stylesheets/_bitters";
@import "vendor/bec/jquery.reveal.css";
@import "vendor/animate-css/animate.css";

// Fonts
@import "fonts/rambla/stylesheet.css";

// $helvetica: "Helvetica Neue UltraLight", "Helvetica Neue", Helvetica, Arial, sans-serif;

// mixin
@function rem($pxval, $base:16) {
  @return ($pxval / $base) * 1rem;
}

@mixin opacity($opacity){
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); // ie8
}

@mixin font-size($pxval, $base:16) {
  font-size: $pxval * 1px;
  font-size: rem($pxval, $base);
}

// variables
$max-width: em(1080);

// media
$iPad-landscape: new-breakpoint(max-width 1024px); // iPad landscape
$iPad-portrait: new-breakpoint(max-width 768px); // iPad portrait
$iPhone-landscape: new-breakpoint(max-width 480px); // iPhone landscape
$iPhone-portrait: new-breakpoint(max-width 320px); // iPhone portrait

// colors
$white: #ffffff;
$whisperGrey:#efefef;
$quietGrey: #dddddd;
$dark-grey: #333333;
$purple: #452b6c;
$blue: #5EC1E6;
$blueTransparent: rgba(94, 193, 230, 0.5);
$bluepurple:#424682;

// clean up after dependencies
@import "scss/bitters";