Juice Mixins

Juice Mixins

http://kylebrumm.com/juice/

Juice is a collection of Sass mixins/functions that are used to minimize the work needed to apply styling/properties to elements. Juice is not just a collection to help with cross browser support, so it is best paired with autoprefixer, for the best possible browser compatibility. You can enable prefixing for the mixin if you would like by setting the $browser-prefixes variable to true

Installation

$ git clone git@github.com:kjbrum/juice.git

Using the File

Just import the "_juice.scss" file into your main scss file.

// In the SCSS file

// Enabling browser prefixing
$browser-prefixes: true !default;

// Import the dist file
@import "juice";

Using Juice Breakpoints

.classname{
@include bp(medium){ preset medium value}
@include bp(480px, 1024px){ between these two values}

Hoverer mixin, This does the link color and the hover color in one mixin. display color is blue and hover color is red. You can also pass other properties, like text-decoration etc..

a{
    text-decoration: none;
    @include hoverer(color, #blue, red);
    @include hoverer(text-decoration, none, underline);
}

Responsive Mixin - Allows you to type in responsive code without setting breakpoints. It uses the breakpoints of small, medium and large. So below: background color will change at those 3 breakpoints. This is good if you want to change a single property at breakpoints

body {
  @include responsive(background-color, #fff, #ddd, #bbb);
{

---