Sassyfication: A sass library to shorten your sass amount

Write less, do more.

Sassyfication is a SASS library with mixins which merge frequently combined css attributes into one.

Setup

Install via npm:

$ npm install sassyfication

Install via yarn:

$ yarn add sassyfication

Utilities

There are also, adapted from bootstrap.

position($top, $right, $bottom, $left)

Shorthand for top , right , bottom , left props.

// Example
.element { 
    @include position(10px, 20px, 30px, 40px);
}

// CSS Output
.element {
    top: 10px;
    right: 20px;
    bottom: 30px;
    left: 40px;
}

pseudo($position: absolute, $content: '')

Simplifies pseudo-element initialization.

// Example
.element {
    @include pseudo();
}

// CSS Output
.element {
   position: absolute;
   content: '';
}

font($font-weight, $font-size, $letter-spacing)

One-liner for font styling.

// Example
.element {
    @include font(600, 1.2em, 0.05em);
}

// CSS Output
.element {
    font-weight: 600;
    font-size: 1.2em;
    letter-spacing: 0.05em;
}

white-space-overflow($white-space: nowrap, $overflow: hidden, $text-overflow: ellipsis)

One-liner for text related overflow handling.

// Example
.element {
    @include white-space-overflow();
}

// CSS Output
.element {
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis;
}

stroke($stroke, $stroke-width, $stroke-linecap, $stroke-dasharray, $stroke-dashoffset)

One-liner for SVG stroke styles.

// Example
.element {
    @include stroke(red, 2px, round, 123, 150);
}

// CSS Output
.element {
    stroke: red;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-dasharray: 123;
    stroke-dashoffset: 150;
}

flex($flex-direction, $align-items, $justify-content, $flex-wrap)

One-liner for flex container.

// Example
.element {
    @include flex(column, center, flex-start, wrap);
}

// CSS Output
.element {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

inline-flex($flex-direction, $align-items, $justify-content, $flex-wrap)

One-liner for inline-flex container.

// Example
.element {
    @include inline-flex(column, center, flex-start, wrap);
}

// CSS Output
.element {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

animate($props)

Props are used for the animation property, @content as keyframes. Generates a random id which is used as name.

// Example
.element {
    @include animate('1s ease-in-out forwards') {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
}

// CSS Output
@keyframes [random-id] {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.element {
   animation: [random-id] 1s ease-in-out forwards;
}

sequential-animation-delay($child-count, $multiplier)

Useful to animate a specific amount of childrens successive.

// Example
.element {
    @include sequential-animation-delay(3, 200ms);
}

// CSS Output
.element:nth-child(0) {
   animation-delay: 0ms;
}

.element:nth-child(1) {
   animation-delay: 200ms;
}

.element:nth-child(2) {
   animation-delay: 400ms;
}

order($list)

Receives a list with selectors and order-index for flex elements. Accepts a list or map with indecies.

// Example
.element {
    @include order(('.a', '.b', '.c'));
}

// CSS Output
.element .a {
   order: 1;
}

.element .b {
   order: 2;
}

.element .c {
   order: 3;
}

// Width and height

size($height: auto, $width: $height)

One-liner for width and height.

// Example
.element {
    @include size(20px, 30px);
}

// CSS Output
.element {
    height: 20px;
    width: 30px;
}

width($width, $min-width, $max-width)

One-liner for max-, min- width (and width).

// Example
.element {
    @include width(10px, 5px, 20px);
}

// CSS Output
.element {
    width: 10px;
    min-width: 5px;
    max-width: 20px;
}

height($height, $min-height, $max-height)

One-liner for max-, min- height (and height).

// Example
.element {
    @include height(10px, 5px, 20px);
}

// CSS Output
.element {
    height: 10px;
    min-height: 5px;
    max-height: 20px;
}

fixed-width($width)

Applies the same value to max, min-width and width.

// Example
.element {
    @include fixed-width(10px);
}

// CSS Output
.element {
    width: 10px;
    min-width: 10px;
    max-width: 10px;
}

fixed-height($height)

Applies the same value to max, min-height and height.

// Example
.element {
    @include fixed-height(10px);
}

// CSS Output
.element {
    height: 10px;
    min-height: 10px;
    max-height: 10px;
}

fixed-size($height: auto, $width: $height)

One-liner for fixed-width and fixed-height.

// Example
.element {
    @include fixed-size(20px, 40px);
}

// CSS Output
.element {
    height: 20px;
    min-height: 20px;
    max-height: 20px;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
}

Breakpoints

@include mq-phones {} // Small devices (landscape phones, 576px and up)
@include mq-tablets {} // Medium devices (tablets, 768px and up)
@include mq-desktop {} // Large devices (desktops, 992px and up)
@include mq-large-desktop {} // Extra large devices (large desktops, 1200px and up)