npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

sassyfication

v1.0.3

Published

Library with sassy mixins to speed up your css workflow

Downloads

487

Readme

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)