Skip to content
This repository has been archived by the owner on Oct 23, 2022. It is now read-only.
/ sassyfication Public archive

đź’…Library with sass mixins to speed up your css workflow.

License

Notifications You must be signed in to change notification settings

simonwep/sassyfication

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation


Logo

Write less, do more.

Current version Downloads (npm) Support me


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)