npm

Share private packages across your team with npm Orgs, now with simplified billing via the aws marketplace!Learn more »

sassyfication

0.2.0 • Public • Published

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

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)

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;
}

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

One-liner for minimum size.

// Example 
.element {
    @include min-size(20px, 40px);
}
 
// CSS Output 
.element {
    min-height: 20px;
    min-width: 40px;
}

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

One-liner for maximum size.

// Example 
.element {
    @include max-size(20px, 40px);
}
 
// CSS Output 
.element {
    max-height: 20px;
    max-width: 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) 

install

npm i sassyfication

Downloadsweekly downloads

5

version

0.2.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability