sassyfication

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

1. position
2. pseudo
3. font
4. white-space-overflow
5. stroke
6. flex
7. inline-flex
8. flex-self
9. animate
10. sequential-animation-delay
11. order
12. size
13. width
14. height
15. fixed-width
16. fixed-height
17. fixed-size
18. min-size
19. max-size
20. margin-between-[v|h]

There are also breakpoints, 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;
}

flex-self($align-self: center, $justify-self: $align-self)

One-liner for flex-items position.

// Example
.element {
    @include flex-self(flex-start, flex-end);
}

// CSS Output
.element {
    align-self: flex-start;
    justify-self: flex-end;
}

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, $base)

Useful to animate a specific amount of childrens successive.

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

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

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

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

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($width: auto, $height: $width)

One-liner for width and height.

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

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

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- and min-width.

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

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

fixed-height($height)

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

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

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

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

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

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

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

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

One-liner for minimum size.

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

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

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

One-liner for maximum size.

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

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

margin-between-h($margin)

Alternative to flex-gap. There's also margin-between-v as vertical version.

// Example
.element {
    @include margin-between-h(5px);
}

// CSS Output
.element:not(:first-child):not(:last-child) {
    margin-left: 5px;
    margin-right: 5px;
}

.element:first-child:not(:last-child) {
    margin-right: 5px;
}

.element:last-child:not(:first-child) {
    margin-left: 5px;
}

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)